Styling af et Form-felt

Det burde være noget i retning af:

.archiveform select{
  width:100px;
  height:75px;
  border:1px solid #c0c0c0;
  background-color:#ff0000;
}

Du kan ikke ændre margin på selve dropdown-selectoren fra select-boksen.

Jeg tror ikke lige jeg forstår det med baggrundsfarven i cellen bag boksen og baggrundsfarven i selectboksen.

Det er temmelig begrænset, hvad man kan ændre på en selectboks.

.activeform  select option {
  background-color:#abc;
}

?

dette påvirker dog ikke baggrundsfarven i cellen når dropdownen ikke er slået ud.

w13, det virker næsten med din kode.

Der er dog et par ting jeg ikke kan få til at virke:

- height:20px virker ikke
- border-color:#bed4bb vil ikke virke så border får en farve
- Så vil jeg også gerne at teksten i selectboksen bliver rykket lidt ind ca. 20 px?

Min kode:

.archiveform select {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color:#68ab20;
    font-size:10px;
    width:100%;
    height:20px;
    border:1px;
    border-style:solid;
    border-color:#bed4bb;
    background-color:#f4f4f4;
}

jeg vil egentlig godt advare lidt mod at sætte højde på input felter samt selects. Hvis man er svagtsynet og man derfor sætter fontstørrelsen op i browseren, så skalerer den alle fontene, inklusive dem som anvendes i input felter samt selects. Hvis der er sat højde på disse og denne højde ikke er dynamisk (i.e. ikke er enheden em) så skalerer fonten inden i feltet, men feltetsstørrelse forbliver den samme, så teksten bliver skåret af og bliver ulæselig.

Du kan selv teste det i Firefox (IE har problemer med skalering af fonte, så man skal teste i FF)

tager 'border' ikke tre argumenter?

i stedet for de tre border kommandoer skulle du nok skrive

border: 1px solid #bed4bb;

ellers er det border-width du skal have fat i

Okay tak for rådet daleif. Så undgår jeg at bruge height. :)

Men har stadig bøvl med border. Har prøvet på alle måder nu og den har kun den standard border som selectboksen nu engang har. Kan det være fordi at border koden ligger under .archiveform select {} og skal ligge et andet sted eller?

Mangler også stadig at få teksten rykket ind så den står længere inde i selectboksen.

kan du ikke lave en test side?

(så jeg vi kopiere den uden selv at skulle lave en først, ja jeg er lidt doven idag).

Jeg synes da jeg fik ramme på alle mine selects i den seneste applikation jeg lavede.

Jeg anvendte dog bare

input, textarea,select {
  border: 1px solid #191970;
  padding: 2px 2px;
}

select option {
  background-color:#fff;
  color:#000;
}


i min css

Underligt det ikke virker... Har lige prøvet at sætte

input, textarea,select {
  border: 1px solid #191970;
  padding: 2px 2px;
}

ind i min CSS og der var ingen forskel. :/

så kom med en side som ligger på nettet, så blvier det nemmere at finde fejlen

Jeg har desværre ikke noget sted at ligge filerne op endnu så alt kører lokalt på min maskine. Men de 2 filer ser sådan ud:

CSS filen:

/* Forms */

.archiveform select {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    color:#68ab20;
    font-size:10px;
    border:1px solid #c0c0c0;
    width:100%;
    background-color:#f4f4f4;
}

HTML filen:

<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td>
<form class="archiveform" action="">
<select name="Months">
<option value="http://www.creative.dk">April 2008</option>
<option value="http://www.creative.dk">Marts 2008</option>
<option value="http://www.creative.dk">Februar 2008</option>
<option value="http://www.creative.dk">Januar 2008</option>
</select></form>
</td>
</tr>
</table>

------------------------------------------------------

- Som sagt virker border ikke
- Af en eller anden grund kommer der ekstra luft ind efter tabellen med formen.

<ole>

Når man sætter font-size i 'px', kan det vel være ligemeget, om man sætter højde på form-inputs. Sætter man derimod begge i 'em', kan browserne skalere teksten uden problemer  =)

/mvh
</bole>

Ups, okay jeg prøver 'em' istedet. Tak olebole. :)

Ole bole>> det er ikke korrekt, FF skalerer fonten alligevel hvis font-size er sat i px, hvilket er meget rart for det er der mange som gør.

Det er nu ganske korrekt, hvad jeg skriver  :)

Der var to ting i det, jeg skrev:
1) Sættes højden af et input element i 'em', er dets højde skalerbart
2) Sættes font-size i 'em', er skriftstørrelsen skalerbar

At så FF også skalerer tekst, hvis størrelse er sat i 'px', kan - set fra koderens synspunkt - være rystende ligegyldigt, når markedets ultimativt største browser ikke gør det. Jeg skrev netop: "kan browserne skalere teksten uden problemer"  ;o)

Min kommentar gik nu på

Når man sætter font-size i 'px', kan det vel være ligemeget, om man sætter højde på form-inputs.

klart at alt fungerer når man anvender em, problemet er jo bare at det ved folk bare ikke. Jeg er rimeligt ligeglad med IE.

"problemet er jo bare at det ved folk bare ikke" >> hvilket netop var årsagen til, jeg skrev, hvad jeg gjorde  =)

"Jeg er rimeligt ligeglad med IE" >> Det kan såmænd heller ikke genere nogen, sålænge du ikke skriver websider. Gør man det, kan man naturligvis ikke tillade sig den slags luxusholdninger  ;o)

jeg skiver mange websider, det meste er dog til interne applikationer hvor vi ikke anvender IE og derfor ikke skal tænke på den slags.

De offentlige sider jeg har lavet anvender naturligvis em og lignende så font skallering virker i IE (træls man ikke kan sætte en ordentlig basis fontstørrelse i IE og så samtidig få font skalleringen til at virke, man bliver nødt at at sætte body font størrelsen til %)

- så sætter jeg mig helt roligt ned og spytter mundstykket til iltapparatet ud igen  ;D

Ja, der findes desværre ingen god browser på markedet. De 'store' er nogenlunde lige elendige på hver deres måde - så en hybrid ville være skønt  =)

Hvilke problemer er der i FF ud over dårlig hukommenlses problmer som er blevet noget bedre med FF3

Dem er der oceaner af! FF's HTML-DOM lag er ganske voldsomt fucked-up - og endnu værre med X(HT)ML-DOM laget. Der er problemer med accept af invalide HTTP-headers o.m.a. Faktisk er der flere ting, som fungerer langt dårligere, end da Mozilla i sin tid overtog Netscape browseren  :o|

- og til den sædvanlige påstand om IE's proprietære natur (i kontrast til FF) - så slæber FF f.eks. rundt på ikke mindre end 160 helt proprietære CSS properties  =)

Det skal såmen nok passe. Plejer dog at holde mig til de ting som W3 selv omtaler.

Så lige at det ser ud til at overflow: auto er ved at fungere i nyeste Safari, det sad jeg og bøvlede med i en applikation.

Uhaja ... Safari og Opera har absolut ikke mindre at lære end FF  =8-O

lukker