Notifikationer

Markér alle som læst Log ud

hkb-x Nybegynder

21. maj 2006 - 15:45 Der er 19 kommentarer og
1 løsning

skift valgt bg farve

jeg har et input hvor jeg gerne vil have at baggrundsfarven skifter når inputet er valgt (så man kan skrive i det)...

kan man gøre det med CSS eller skal man over i javascript?

Synes godt om

alca Nybegynder

21. maj 2006 - 16:52 #1

Kan du ikke uddybe lidt?

Synes godt om

hkb-x Nybegynder

21. maj 2006 - 16:57 #2

sory...

Jeg vil gerne have at når folk skriver i et <input> felt så skifter baggrundsfarven...

Så når folk kliker i <input> feltet så skal baggrundsfarven men når de klikker på et andet <input> felt så skal det skifte farve tilbage igen...

Synes godt om

olebole Juniormester

21. maj 2006 - 17:47 #3

Synes godt om

olebole Juniormester

21. maj 2006 - 17:48 #4

- vrøvl :)

<input type="text" onfocus="this.style.background='yellow'" onblur="this.style.background=''">

Synes godt om

hkb-x Nybegynder

21. maj 2006 - 23:53 #5

i know... men jeg vil gerne finde ud af om der er en måde at gøre det på i css så jeg ikke skal gøre det på alle mine inputs...

Synes godt om

olebole Juniormester

21. maj 2006 - 23:58 #6

Jamen, det er der ikke - og det ville heller ikke være i tråd med meningen med CSS. CSS' hover er i forvejen på kant med idéen bag CSS :)
Du er nødt til at bruge script

Synes godt om

mclemens Nybegynder

22. maj 2006 - 08:34 #7

tro på olebole ;)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">

window.onload=function(){
inpcolor();
}

function inpcolor(){
inps=document.getElementsByTagName("input");
for(i=0;i<inps.length;i++){
inps[i].onfocus=function(){this.style.background="#ff0";}
inps[i].onblur=function(){this.style.background="#fff";}
}
}

</script>

<style type="text/css">

</style></head>

<body>

<input type="text" name="a">
<input type="text" name="b">
<input type="text" name="c">

</body></html>

Synes godt om

mclemens Nybegynder

22. maj 2006 - 09:59 #8

... eller med className kontrol:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">

window.onload=function(){
inpcolor();
}

function inpcolor(){
inps=document.getElementsByTagName("input");
for(i=0;i<inps.length;i++){
if(inps[i].className=="inpbg"){
inps[i].onfocus=function(){this.style.background="#ff0";}
inps[i].onblur=function(){this.style.background="#f00";}
}
}
}

</script>

<style type="text/css">

.inpbg{background:#f00;}

</style></head>

<body>

<input type="text" name="a">
<input type="text" name="b" class="inpbg">
<input type="text" name="c" class="inpbg">
<input type="text" name="d">

</body></html>

Synes godt om

hkb-x Nybegynder

22. maj 2006 - 10:03 #9

sorø... det var ikke fordi jeg har noget imod olebole's foslag... han skrev bare ikke at det ikke kunne lade sig gøre med CSS...

@mclemens

vil det forslag påvirke alle <input>'s? og hvis jeg også vil have kanten (border) ændret hvad gør jeg så??

Synes godt om

mclemens Nybegynder

22. maj 2006 - 10:25 #10

Påvirker alle inputs:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">

window.onload=function(){
inpcolor();
}

function inpcolor(){
inps=document.getElementsByTagName("input");
for(i=0;i<inps.length;i++){
inps[i].onfocus=function(){
this.style.background="#ff0";
this.style.border="3px solid #f00";
}
inps[i].onblur=function(){
this.style.background="#fff";
this.style.border="1px solid #000";
}
}
}

</script>

<style type="text/css">

input{border:1px solid #000;}

</style></head>

<body>

<input type="text" name="a">
<input type="text" name="b">
<input type="text" name="c">

</body></html>

Synes godt om

mclemens Nybegynder

22. maj 2006 - 10:27 #11

Påvirker inputs med class="inpbg"

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">

window.onload=function(){
inpcolor();
}

function inpcolor(){
inps=document.getElementsByTagName("input");
for(i=0;i<inps.length;i++){
if(inps[i].className=="inpbg"){
inps[i].onfocus=function(){
this.style.background="#ff0";
this.style.border="3px solid #f00";
}
inps[i].onblur=function(){
this.style.background="#fff";
this.style.border="1px solid #000";
}
}
}
}

</script>

<style type="text/css">

input{border:1px solid #000;}

</style></head>

<body>

<input type="text" name="a">
<input type="text" name="b" class="inpbg">
<input type="text" name="c" class="inpbg">
<input type="text" name="d" class="inpbg">
<input type="text" name="e">

</body></html>

Synes godt om

mclemens Nybegynder

22. maj 2006 - 10:28 #12

hehe ... i den sidste af de
to så ret evt. lige:

input{border:1px solid #000;}

til:

input.inpbg{border:1px solid #000;}

Synes godt om

hkb-x Nybegynder

22. maj 2006 - 20:27 #13

@mclemens

super... skriv svar for point...

Synes godt om

mclemens Nybegynder

22. maj 2006 - 20:55 #14

- ok, vil gerne dele denne med Olebole hvis det er ok?
(han kom jo med den første input background switcher i tråden)

@Olebole, læg lige et svar just in case...

Synes godt om

hkb-x Nybegynder

22. maj 2006 - 21:03 #15

ok.., er i orden... så giver jeg olebole ind til i morgen tl at skrive et stk svar...

Synes godt om

olebole Juniormester

22. maj 2006 - 21:16 #16

mclemens >> du har lavet arbejdet i denne tråd, så det må være dine points - men tak for tilbudet ;o)

Synes godt om

mclemens Nybegynder

22. maj 2006 - 21:17 #17

ok :)

Synes godt om

hkb-x Nybegynder

23. maj 2006 - 09:25 #18

enig med ole... tak for hjælpen begge to ;)

Synes godt om

mclemens Nybegynder

23. maj 2006 - 09:38 #19

og tak for point :)

Synes godt om

olebole Juniormester

23. maj 2006 - 17:30 #20

- og selvtak ;o)

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS