Kan man byta färg på pilen bredvid en selectbox? Från svart pil på grå botten till något annat? Om det går, hur skriver man i CSS? :q
Fin färg på Select-box?
7 svar · 366 visningar · startad av aasah
Det går inte att göra med html och css. Det finns några sätt att efterlikna select-element t ex. http://www.webforum.nu/showthread.php?s=&postid=1048730#post1048730
mv icaaq
Tack, men det där var alldeles för avancerat för mig (särskilt för det jag ska ha det till). Men jag undrar... Den artikel som det länkas till (från icaaqs länkade inlägg) säger:
select something new, Part 1 skrev:
. Apart from basic background color, font and color adjustments, you don’t really have a lot of control over the <select>.
Så då borde det väl gå att byta färg på den, eller...??? :q
Eller vad är det man KAN ändra på den?
Nej, du kan inte ändra utseendet på själva containern, bara själva option-listan (rullgardinen).
Typ background, color, font etc..
Aha! :r Det var det som menades.
Det var ju synd, men... hur ändrar man font-färg på option-delen då? Det kanske inte vore fullt lika fullt om mina options hade samma färg som resten av texten....
option { color:red; }
Testade lite, lekte fram detta:
select, option {
background-color: red;
font-family: verdana, sans serif;
font-size: 9px;
color:white;
border: solid;
}
option {
border: none;
}
Då blir första valet också markerat än om man endast kör på option. för då blir endast lista som fälls ut färgad.
/r
har ändrat lite så ett tidigare problem försvann.
/r 2
man kan även bygga på och göra så hover funkar i firefox, men som tidigare nämnt så funkar det EJ i IE.
Man måste då använda sig av två olika filer, select bakgrunden måste vara typ en svart bild. och option:hover bilden kan t ex vara röd.
notering, om man kör font-weight: bold på select, option så blir även option fetstil. Trots font-weight: normal längre ner så funkar detta i firefox men inte i IE.
select, option {
background-color: red;
font-family: verdana, sans serif;
font-size: 9px;
font-weight: bold;
color:white;
border: solid;
background-image: url(filnamn.jpg);
}
option {
font-weight: normal;
border: none;
}
option:hover {
font-weight: normal;
border: none;
background-image: url(filnamn2.jpg);
}