CSS på checkbox

Må vi se dit style sheet ?

/Tony

Den del der berører input hedder således:

input {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 10px;
      color: #333333;
      background-color: #CCCCCC;
      border: 1px #333333;
      font-weight: bold;
}

Anyone ?

Working on it ... dosn\'t seam to work ...

he he - ok ..

Det er måske fordi det ikke kan lade sig gøre ?

linien
      border: 1px #333333;
bliver til:
      border-color: #333333;
      border-style: solid;
      border-left: 1px;
      border-right: 1px;
      border-top: 1px;
      border-bottom: 1px;

Jeg vil vædde på det også kan skrives på een linie hvis man kender den rette rækkefølge.

mvh JakobA

Synes ikke rigtigt det rokker ved min checkbox ??

<STYLE type=\"text/css\">
<!--
input,radiobutton{border:1px;
          border-style:solid;
          border-color:#000000;
          background-color:#f7f7ef;
          color:green;
        }
-->
</style>

... men der er stadig problemer med 3d.

radiobutton-face-color:darkblue;
radiobutton-track-color:red;
radiobutton-shadow-color:\'green\';
radiobutton-highlight-color:\'yellov\';
radiobutton-3dlight-color:\'white\';
radiobutton-darkshadow-color:\'white\'

?????????

/Tony

Det var nu en checkbox - men det er ok :)

Den første del du skriver - gør det samme som mit nuværende input style ..

Den anden del giver ikke rigtigt nogen mening - det sker der ikke så meget ved :(

:-) Nej - nej, den er ment som inspiration ... stammer fra textarea. Der farer den lige i flæsket af div. 3d effekter ...

Hæ hæ - farer lige i flæsket :)

Men den reagerer lidt speget på checkboxene

Kan det passe at jeg er den første EVER der gerne vil påvirke mine box\'s !? (nej - vel)

//j1z

>>\"Men den reagerer ...\" Det siger du ikke !
>>\"Kan det passe ...\" Nej !

... ser om jeg kan finde en gammel og støvet bog ...

Nej gir op (p.t.), kan ikke få skovlen under de 3d effekter.

Men svaret må stadig være: Ja man kan godt styles på (noget af) en checkbox :-)

Ellers - hva\' med to små layers > swop images ...

/Tony

Well... sådan har jeg løst problemet. Det virker ok. Det kan implementeres på et hav af forskellige måder.

Ajj - ikke flere layers :(

Så skal der vel scriptes for at få dem med i formen ?

Må nok leve med 3D fætteren indtil der er nogen der kommer med en mulighed for css på checkbox\'s

Ellers takker for forsøget


//j1z

hvad med et simpelt imagswap?
filen \"check_on.gif\" er et billede at checkboxen som du vil have den styler med checkmærke i.
filen \"check_off.gif\" er et billede uden checkmærke i.

og så blot swappe mellem de to billeder. (noget nemmere end layers:)

jakoba -> Så når man klikker på den - så skal den loade en ny side med en anden gif ?

Og hvordan får man det så ind i sin form ??

Du skal alligevel have en lille funktion til at swappe billederne. den bruger vi så også til at skrive en værdi i et hidden felt der husker checkboxens værdi:

<script language=\'javascript\'>

function toggleCheck( checkboxnavn ) {
    var felt = document.forms[\'dinForm\'].elements[checkboxnavn];
    felt.value = 1 - parseInt(\"0\"+felt.value);  // 1 = sat, 0 = usat.
    var imgo = document.images[checkboxnavn];
    if ( felt.value == \"1\" )
        imgo.src = \"checkbox_on.gif\"
    else
        imgo.src = \"checkbox_off.gif\";
}; //end toggleCheck

</script>

nede ved checkboxen skriver du så;

<input type=\'hidden\' name=\'fodsved\' value=\"0\">
<a href=\"java script:void(toggleCheck(\'fodsved\'));\"><img name=\"fodsved\" src=\'checkbox_off.gif\' width=15 height=15></a> Lider de af fodsved?

Bemærk at for hver checkbox skal samme navn benyttes i <input kommando, <a kommando og <img kommando (her \'fodsved\')

mvh JakobA

Jeg bruger pt følgende script:
function check(box){
    if (box.value==\"false\"){
        box.src=\"icon_checkbox_on.gif\";
        box.value=\"true\";
    }
    else {
        box.src=\"icon_checkbox_off.gif\";
        box.value=\"false\";
    }
}   
</script>

Om man så vil bruge det samme med hidden-fields eller PHP-classes er op til en selv.. jeg overvejer at benytte klasser... eller måske bare et simpelt array

nå men html ser sådan ud:

<img name=\"checkbox\" value=\"false\" src=\"icon_checkbox_off.gif\" width=\"11\" height=\"11\" onClick=\"check(this);\" align=\"absmiddle\">

Håber dette kan sætte nogle tanker igang... du skal ikke gi op :-)

Ups. sæt  border=0  o <img kommandoen.

... jep ... well det står der ikke fordi det er defineret i et CSS. Men ellers har du ret.

Godt set!

::mblarsen::

Her er forresten et eksempel på en der har lavet grafiske checkboxe..

http://home.hio.no/pedit/cb/html_1.htm

right. men det var nu til mit eget forslag ovenover. ( svært at skelne fra dit :-))

;-)

Undskyld, men ...

subtypes understøttes såvidt jeg husker af CSS, så

input {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 10px;
      color: #333333;
      background-color: #CCCCCC;
      border: 1px #333333;
      font-weight: bold;
}

input.checkbox {
      font-family: Verdana, Arial, Helvetica, sans-serif;
      font-size: 10px;
      color: #444444
      background-color: #DDDDDDD;
      border: 1px #444444;
      font-weight: bold;
}

Øeh ... såvidt jeg husker

Korrekt, men virker ikke på checkboxe :-(

Ogeh ...
jeg har heller ikke fået tjekket ;·|

... eller på drop-down-selectboxe-eller-hvad-de-nu-hedder-ting!

Lidt opsamling ...

Tilsyneladende er efterfølgende de \"eneste\" styles vi kan få lov til tilføje checkboxe ... der kan dog være andre jeg har overset:

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.0 Transitional//EN\">
<html>
<head>
    <title>Checkbox styles</title>
</head>
<body>
<center>
<input type=\"checkbox\" style=\"background-color:blue\" onMouseover=\"this.style.backgroundColor=\'#ff0000\'\" onMouseout=\"this.style.backgroundColor=\'#ffffff\'\">

<input type=\"checkbox\" name=\"\" value=\"check me\" style={background-image:url(dit_billede.gif);}>

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

<input type=\"checkbox\" name=\"aCheckBox\" 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\">
</center>
</body>
</html>

/Tony