skift valgt bg farve

Kan du ikke uddybe lidt?

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...

<ole>

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

/mvh
</bole>

- vrøvl  :)

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

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...

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

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>

... 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>

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å??

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>

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>

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

input{border:1px solid #000;}

til:

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

@mclemens

super... skriv svar for point...

- 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...

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

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

ok :)

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

og tak for point :)

- og selvtak  ;o)