CSS/HTML: Jak zmienić kolor znacznika wyboru na wejściu pola wyboru?

Question

Jak zmienić kolor znacznika wyboru w polu wprowadzania kodu HTML?

Answer 1

Można by utworzyć obraz pola wyboru i użyć jej jako swojej wyboru

Poniżej omówiono stanowisko kontroli zwyczaj wejściowe ...

http://www.thecssninja.com/css/custom-inputs-using-css

Answer 2

można naśladować pole wyboru z innym elementem i zestaw kolor tła według życzenia.

http://jsfiddle.net/ApHME/

nie próbowałem zrobić to doskonały, żeby wykazać koncepcji. Jak widać, kolor tła jest zielony, brak obrazów, brak bibliotek; minimalny js.

---

CZEKAJ !!!
MVC purystów i innych fanatyków - Możesz łatwo przenieść js w swoją własną małą metodę, ale próbuję , aby zademonstrować prostotę - całkiem niezła proszę, nie głosujcie mnie za to.
westchnienie.

Answer 3

Oto czyste rozwiązanie CSS, które nie powinno niszczyć czytników ekranu ani domyślnych działań agenta użytkownika. Dodatkowo jest to obsługiwane w najnowszych wersjach dużych 4 przeglądarek (i kilku innych, jeśli dodasz kilka dodatkowych hacków, ale zostawię to tobie, aby dowiedzieć się, prawdopodobnie nie dostaniesz więcej niż wsparcie IE8 +, ponieważ używa pseudo elementy).

Chodzi o to, aby ukryć rzeczywisty element formularza (ponieważ przeglądarki wymieniają się wewnętrznymi stylami i nie ujawniają jeszcze wszystkich możliwości stylu css) i zastąpić je tym, które lubimy. Jednym ze skutków ubocznych jest to, że będziesz chciał śledzić zmiany, a nie klikanie zdarzeń w twoim JS, jeśli tego potrzebujesz (ale mimo to robiłeś to dobrze?).

Ponieważ etykieta jest przywiązany do elementu formularza klikając działa jak można by się spodziewać, więc nowe, niesamowite, checkbox (::before) nadużywa selektorów atrybutów ([checked]) na oryginalnym by sprawdzić czy jest checked. Gdy zostanie zaznaczone, wyświetli nam znak wyboru "awesomer" (::after).

Znacznik wyboru (::after) nadużywa szerokości obramowania dla grubości i wysokości/szerokości, tworząc znacznik wyboru, np. Element. Na koniec przekształcamy pudło 45deg, aby właściwie dopasować kąt.

Aby zmienić kolor znacznika wyboru, zmień kolor obramowania w stylu ::after. Dodatkowo, jeśli chcesz, aby zawsze pasował do twojego koloru tekstu, usuń całkowicie kolor ramki. Aby zmienić radio, zmień kolor początkowy gradientu radialnego (ten, który nie jest biały).

także niesamowite jest to, że jego związany rozmiar czcionki, więc jeśli Twój tekst jest większy, należy pasowana w prawo (choć może się zdarzyć błędy zaokrągleń przy użyciu względnych rozmiarów czcionek, więc należy być ostrożnym)

podaję podstawowe style dla obu typów sprawdzania (pole wyboru i radio).

HTML:

<fieldset> 
    <legend>Checkbox example</legend> 
    <input id="checkbox" type="checkbox"/> 
    <label for="checkbox">Some awesome checkbox label</label> 
</fieldset> 
<fieldset> 
    <legend>Radio example</legend> 
    <div> 
     <input id="radio1" type="radio" name="radio"/> 
     <label for="radio1">Some awesome radio option #1</label> 
    <div> 
    </div> 
     <input id="radio2" type="radio" name="radio"/> 
     <label for="radio2">Some awesome radio option #2</label> 
    </div> 
</fieldset> 

CSS:

label, input[type="radio"], input[type="checkbox"] { 
    line-height: 2.1ex; 
} 

input[type="radio"], 
input[type="checkbox"] { 
    position: absolute; 
    left: -999em; 
} 

input[type="radio"] + label, 
input[type="checkbox"] + label { 
    position: relative; 
    overflow: hidden; 
    cursor: pointer; 
} 

input[type="radio"] + label::before, 
input[type="checkbox"] + label::before { 
    content: ""; 
    display: inline-block; 
    vertical-align: -25%; 
    height: 2ex; 
    width: 2ex; 
    background-color: white; 
    border: 1px solid rgb(166, 166, 166); 
    border-radius: 4px; 
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.25); 
    margin-right: 0.5em; 
} 

input[type="radio"]:checked + label::before { 
    background: radial-gradient(circle at center, #1062a4 .6ex, white .7ex); 
} 

input[type="radio"] + label::before { 
    border-radius: 50%; 
} 

input[type="checkbox"]:checked + label::after { 
    content: ''; 
    position: absolute; 
    width: 1.2ex; 
    height: 0.4ex; 
    background: rgba(0, 0, 0, 0); 
    top: 0.9ex; 
    left: 0.4ex; 
    border: 3px solid #1062a4; 
    border-top: none; 
    border-right: none; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
} 

marginesie: necropost ponieważ było to pierwsze pytanie, które pojawiło się, kiedy starałem się zapamiętać jak wyciągnąłem ten off w przeszłości. ;)