speciel border på checkbox

Du kan selv vælge mellem dem her :))

<html>
<head>
    <title></title>
<style>
body {background-color:#666666}

.tjekket1 {border-style: dotted; border-width: 0px; border-color: #009900; background-color: #ff0000;}
.tjekket2 {border-style: dotted; border-width: 2px; border-color: #009900; background-color: #ff0000;}
.tjekket3 {border-style: dotted; border-width: 3px; border-color: #009900; background-color: #ff0000;}
.tjekket4 {border-style: dotted; border-width: 4px; border-color: #009900; background-color: #ff0000;}
.tjekket5 {border-style: dotted; border-width: 5px; border-color: #009900; background-color: #ff0000;}
.tjekket6 {border-style: dotted; border-width: 6px; border-color: #009900; background-color: #ff0000;}
.tjekket7 {border-style: solid; border-width: 2px; border-color: #009900; background-color: #ff0000;}
.tjekket8 {border-style: none; border-width: 2px; border-color: #009900; background-color: #ff0000;}
.tjekket9 {border-style: groove; border-width: 2px; border-color: #009900; background-color: #ff0000;}


.check {
  background-color : #e9e9e9;
  border : 3px solid;
  border-bottom : 1px solid Gray;
  border-top : 1px solid Silver;
  border-left : 5px solid Silver;
  border-right : 5px solid Gray;   
}
</style>

</head>

<body>
<form name="f">

<input type="checkbox" value="hej" class="tjekket1">bøh
<input type="checkbox" value="hej" class="tjekket2">bøh
<input type="checkbox" value="hej" class="tjekket3">bøh
<input type="checkbox" value="hej" class="tjekket4">bøh
<input type="checkbox" value="hej" class="tjekket5">bøh
<input type="checkbox" value="hej" class="tjekket6">bøh
<input type="checkbox" value="hej" class="tjekket7">bøh
<input type="checkbox" value="hej" class="tjekket8">bøh
<input type="checkbox" value="hej" class="tjekket9">bøh
<input type="checkbox" value="hej" class="check">bøh



<input type="checkbox" style="background-color:blue" onMouseover="this.style.backgroundColor='#ff0000'" onMouseout="this.style.backgroundColor='#ffffff'">

<input type="checkbox" name="billede" value="check me" style="background-image:URL(2.jpg);">

<input type="checkbox" style="zoom:3">

<input type="checkbox" onFocus="this.blur();" style="background-color:lime;" onClick="if (this.style && !this.checked) this.style.backgroundColor = 'lime'; else if (this.style && this.checked) this.style.backgroundColor = 'red';">

<input type="checkbox" checked style="background-color:#CCff99">


<br>

<input type="radio" value="hej" class="tjekket1">bøh
<input type="radio" value="hej" class="tjekket2">bøh
<input type="radio" value="hej" class="tjekket3">bøh
<input type="radio" value="hej" class="tjekket4">bøh
<input type="radio" value="hej" class="tjekket5">bøh
<input type="radio" value="hej" class="tjekket6">bøh
<input type="radio" value="hej" class="tjekket7">bøh
<input type="radio" value="hej" class="tjekket8">bøh
<input type="radio" value="hej" class="tjekket9">bøh
<input type="radio" value="hej" class="check">bøh
<input type="radio" style="background-color:blue" onMouseover="this.style.backgroundColor='#ff0000'" onMouseout="this.style.backgroundColor='#ffffff'">
<input type="radio" name="billede" value="check me" style="background-image:URL(2.jpg);">
<input type="radio" style="zoom:3">
<input type="radio" onFocus="this.blur();" style="background-color:lime;" onClick="if (this.style && !this.checked) this.style.backgroundColor = 'lime'; else if (this.style && this.checked) this.style.backgroundColor = 'red';">
<input type="radio" checked style="background-color:#CCff99">

</form>

</body>
</html>

/Nikolaj

hmm nikolajdu. Nu har jeg prøvet mig lidt frem med noget af det. Der er kommet flere sjove bordere frem, men ikke en med en tynd sort border, og intet andet. Kunne jeg få dig til at pille den del af koden ud/kreere en, der ser sådan ud?

Hono

sådan en?

<style>
.check {
  border-bottom : 1px solid black;
  border-top : 1px solid black;
  border-left : 1px solid black;
  border-right : 1px solid black;   
}
</style>

</head>

<body>
<form name="f">
<input type="checkbox" value="hej" class="check">

nikolajdu >> Ja, det skulle man tro! Men prøv at se resultatet i en browser (i hvert fald IE6.0). Så vil du se at den sorte border er der, men tilgengæld er der også den der "3d-border" indeni. Det er den jeg vil af med.

Hono

Jeg mener ikke du kan spille af med den.

nå, det var da irriterende. Lader lige spørgsmålet stå åbent, i tilfælde af at en alligevel skulle kende et trick.

Hono

Det er jeg temmelig sikker på, man ikke kan...

Men hvad siger den til dette:

<input type="checkbox" paintedborder="false"> ?

hmm, nej Oasen, det virker heller ikke :(. Jeg må nok hellere se i øjnene at det ikke kan lade sig gøre. Takker for hjælpen!

Hono

Ja, det er vist desværre umuligt at fjerne, ligesom diverse andre ting...