Odpowiedzi:
Gdyby coś się stało w którejkolwiek przeglądarce, byłbym zaskoczony. Jest to jeden z tych wyjątkowych elementów formularza, których przeglądarki zwykle nie pozwalają na zbyt wiele stylów, a ludzie zwykle próbują zastąpić je javascriptem, aby mogli nadać styl / kod, aby coś wyglądało i działało jak pole wyboru.
Sugeruję użycie „konspektu” zamiast „obramowania”. Na przykład: outline: 1px solid #1e5180.
!importantużywasz konspektu, może być konieczne dodanie do twojego css. Testowałem to w Firefoksie 12.0 i bez! Ważne, zarys znikałby tak długo, jak klikałem pole wyboru.
Powinieneś użyć
-moz-appearance:none;
-webkit-appearance:none;
-o-appearance:none;Następnie pozbędziesz się domyślnego obrazu / stylu pola wyboru i możesz go zmienić. W każdym razie w Firefoksie nadal będzie tam obramowanie
Możesz użyć cieni prostokątnych do sfałszowania obramowania:
-webkit-box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
-moz-box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);Oto czyste rozwiązanie CSS (bez obrazów) dla różnych przeglądarek, oparte na niestandardowych polach wyboru Martina i przyciskach radiowych z łączem CSS3: http://martinivanov.net/2012/12/21/imageless-custom-checkboxes-and-radio-buttons -with-css3-revisited /
Oto jsFiddle: http://jsfiddle.net/DJRavine/od26wL6n/
Przetestowałem to na następujących przeglądarkach:
label,
input[type="radio"] + span,
input[type="radio"] + span::before,
label,
input[type="checkbox"] + span,
input[type="checkbox"] + span::before
{
display: inline-block;
vertical-align: middle;
}
label *,
label *
{
cursor: pointer;
}
input[type="radio"],
input[type="checkbox"]
{
opacity: 0;
position: absolute;
}
input[type="radio"] + span,
input[type="checkbox"] + span
{
font: normal 11px/14px Arial, Sans-serif;
color: #333;
}
label:hover span::before,
label:hover span::before
{
-moz-box-shadow: 0 0 2px #ccc;
-webkit-box-shadow: 0 0 2px #ccc;
box-shadow: 0 0 2px #ccc;
}
label:hover span,
label:hover span
{
color: #000;
}
input[type="radio"] + span::before,
input[type="checkbox"] + span::before
{
content: "";
width: 12px;
height: 12px;
margin: 0 4px 0 0;
border: solid 1px #a8a8a8;
line-height: 14px;
text-align: center;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
background: #f6f6f6;
background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
background: -o-radial-gradient(#f6f6f6, #dfdfdf);
background: radial-gradient(#f6f6f6, #dfdfdf);
}
input[type="radio"]:checked + span::before,
input[type="checkbox"]:checked + span::before
{
color: #666;
}
input[type="radio"]:disabled + span,
input[type="checkbox"]:disabled + span
{
cursor: default;
-moz-opacity: .4;
-webkit-opacity: .4;
opacity: .4;
}
input[type="checkbox"] + span::before
{
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
}
input[type="radio"]:checked + span::before
{
content: "\2022";
font-size: 30px;
margin-top: -1px;
}
input[type="checkbox"]:checked + span::before
{
content: "\2714";
font-size: 12px;
}
input[class="blue"] + span::before
{
border: solid 1px blue;
background: #B2DBFF;
background: -moz-radial-gradient(#B2DBFF, #dfdfdf);
background: -webkit-radial-gradient(#B2DBFF, #dfdfdf);
background: -ms-radial-gradient(#B2DBFF, #dfdfdf);
background: -o-radial-gradient(#B2DBFF, #dfdfdf);
background: radial-gradient(#B2DBFF, #dfdfdf);
}
input[class="blue"]:checked + span::before
{
color: darkblue;
}
input[class="red"] + span::before
{
border: solid 1px red;
background: #FF9593;
background: -moz-radial-gradient(#FF9593, #dfdfdf);
background: -webkit-radial-gradient(#FF9593, #dfdfdf);
background: -ms-radial-gradient(#FF9593, #dfdfdf);
background: -o-radial-gradient(#FF9593, #dfdfdf);
background: radial-gradient(#FF9593, #dfdfdf);
}
input[class="red"]:checked + span::before
{
color: darkred;
} <label><input type="radio" checked="checked" name="radios-01" /><span>checked radio button</span></label>
<label><input type="radio" name="radios-01" /><span>unchecked radio button</span></label>
<label><input type="radio" name="radios-01" disabled="disabled" /><span>disabled radio button</span></label>
<br/>
<label><input type="radio" checked="checked" name="radios-02" class="blue" /><span>checked radio button</span></label>
<label><input type="radio" name="radios-02" class="blue" /><span>unchecked radio button</span></label>
<label><input type="radio" name="radios-02" disabled="disabled" class="blue" /><span>disabled radio button</span></label>
<br/>
<label><input type="radio" checked="checked" name="radios-03" class="red" /><span>checked radio button</span></label>
<label><input type="radio" name="radios-03" class="red" /><span>unchecked radio button</span></label>
<label><input type="radio" name="radios-03" disabled="disabled" class="red" /><span>disabled radio button</span></label>
<br/>
<label><input type="checkbox" checked="checked" name="checkbox-01" /><span>selected checkbox</span></label>
<label><input type="checkbox" name="checkbox-02" /><span>unselected checkbox</span></label>
<label><input type="checkbox" name="checkbox-03" disabled="disabled" /><span>disabled checkbox</span></label>
<br/>
<label><input type="checkbox" checked="checked" name="checkbox-01" class="blue" /><span>selected checkbox</span></label>
<label><input type="checkbox" name="checkbox-02" class="blue" /><span>unselected checkbox</span></label>
<label><input type="checkbox" name="checkbox-03" disabled="disabled" class="blue" /><span>disabled checkbox</span></label>
<br/>
<label><input type="checkbox" checked="checked" name="checkbox-01" class="red" /><span>selected checkbox</span></label>
<label><input type="checkbox" name="checkbox-02" class="red" /><span>unselected checkbox</span></label>
<label><input type="checkbox" name="checkbox-03" disabled="disabled" class="red" /><span>disabled checkbox</span></label>Wiem, że jestem przestarzały ... Ale małym obejściem byłoby umieszczenie pola wyboru w tagu etykiety, a następnie stylizowanie etykiety za pomocą obramowania:
<label class='hasborder'><input type='checkbox' /></label>następnie stylizuj etykietę:
.hasborder { border:1px solid #F00; }label { position: relative; overflow: hidden; width: 16px; height: 16px; border: 1px solid #0f0; }a następnie label > input[type=checkbox] { position: absolute; left: -999px; }To pozwoli ci dostosować własne pole wyboru, a oryginalne pole wyboru będzie nadal zaznaczane / odznaczane, ale użytkownik go nie zobaczy. Będą widzieć tylko Twoje niestandardowe pole wyboru.
:hoveri, :checkedaby stylizować inne stany niestandardowego pola wyboru.
Oto moja wersja, która używa FontAwesome jako elementu zaznaczania pola wyboru. Myślę, że FontAwesome jest używany przez prawie wszystkich, więc można bezpiecznie założyć, że Ty też go masz. Nie testowane w IE / Edge i chyba nikogo to nie obchodzi.
input[type=checkbox] {
-moz-appearance:none;
-webkit-appearance:none;
-o-appearance:none;
outline: none;
content: none;
}
input[type=checkbox]:before {
font-family: "FontAwesome";
content: "\f00c";
font-size: 15px;
color: transparent !important;
background: #fef2e0;
display: block;
width: 15px;
height: 15px;
border: 1px solid black;
margin-right: 7px;
}
input[type=checkbox]:checked:before {
color: black !important;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<input type="checkbox">W przypadku przeglądarek Firefox , Chrome i Safari nic się nie dzieje.
W IE obramowanie jest stosowane poza polem wyboru (nie jako część pola wyboru), a „fantazyjny” efekt cieniowania w polu wyboru zniknął (wyświetlany jako staroświeckie pole wyboru).
W przypadku Opery styl obramowania w rzeczywistości nakłada obramowanie na element pola wyboru.
Opera radzi sobie również z innymi stylami na polu wyboru lepiej niż inne przeglądarki: kolor jest stosowany jako kolor zaznaczenia, kolor tła jest stosowany jako kolor tła wewnątrz pola wyboru (tj. Stosuje tło tak, jakby pole wyboru znajdowało się wewnątrz a <div>z tłem)) .
Najłatwiejszym rozwiązaniem jest umieszczenie pola wyboru <div>tak, jak sugerowali inni.
Jeśli chcesz całkowicie kontrolować wygląd, będziesz musiał zastosować zaawansowane podejście do obrazu / javascript, również przeznaczone dla innych.
Stylizowanie pól wyboru (i wielu innych elementów wejściowych dla tej materii) nie jest tak naprawdę możliwe w przypadku czystego CSS, jeśli chcesz radykalnie zmienić wygląd wizualny.
Najlepszym rozwiązaniem jest zaimplementowanie czegoś takiego jak jqTransform , które faktycznie zastępuje dane wejściowe obrazami i stosuje do nich zachowanie javascript, aby naśladować pole wyboru (lub inny element w tym zakresie)
Nie, nadal nie możesz stylizować samego pola wyboru, ale (w końcu) wymyśliłem, jak stylizować iluzję, zachowując funkcjonalność klikania pola wyboru. Oznacza to, że możesz to przełączyć, nawet jeśli kursor nie jest idealnie nieruchomy, bez ryzyka zaznaczenia tekstu lub uruchomienia funkcji przeciągnij i upuść!
Przykładem jest użycie „przycisku” zakresu, a także tekstu na etykiecie, ale daje on wyobrażenie, jak można uczynić pole wyboru niewidocznym i narysować wszystko za nim.
To rozwiązanie prawdopodobnie pasuje również do przycisków radiowych.
Poniższe działa w IE9, FF30.0 i Chrome 40.0.2214.91 i jest tylko podstawowym przykładem. Nadal możesz go używać w połączeniu z obrazami tła i pseudoelementami.
http://jsfiddle.net/o0xo13yL/1/
label {
display: inline-block;
position: relative; /* needed for checkbox absolute positioning */
background-color: #eee;
padding: .5rem;
border: 1px solid #000;
border-radius: .375rem;
font-family: "Courier New";
font-size: 1rem;
line-height: 1rem;
}
label > input[type="checkbox"] {
display: block;
position: absolute; /* remove it from the flow */
width: 100%;
height: 100%;
margin: -.5rem; /* negative the padding of label to cover the "button" */
cursor: pointer;
opacity: 0; /* make it transparent */
z-index: 666; /* place it on top of everything else */
}
label > input[type="checkbox"] + span {
display: inline-block;
width: 1rem;
height: 1rem;
border: 1px solid #000;
margin-right: .5rem;
}
label > input[type="checkbox"]:checked + span {
background-color: #666;
}
<label>
<input type="checkbox" />
<span> </span>Label text
</label>Oto prosty sposób (do użycia przed lub po pseudoelementach / klasach):
input[type=checkbox] {
position: relative;
}
input[type=checkbox]:after {
position: absolute;
top: 0;
left: 0;
/* Above three lines allow the checkbox:after position at checkbox's position */
content: '';
width: 32px;
height: 32px;
z-index: 1; /* This allows the after overlap the checkbox */
/* Anything you want */
}<!DOCTYPE html>
<html>
<head>
<style>
.abc123
{
-webkit-appearance:none;
width: 14px;
height: 14px;
display: inline-block;
background: #FFFFFF;
border: 1px solid rgba(220,220,225,1);
}
.abc123:after {
content: "";
display: inline-block;
position: relative;
top: -3px;
left: 4px;
width: 3px;
height: 5px;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
-webkit-transform: rotate(45deg);
}
input[type=checkbox]:checked {
background: #327DFF;
outline: none;
border: 1px solid rgba(50,125,255,1);
}
input:focus,input:active {
outline: none;
}
input:hover {
border: 1px solid rgba(50,125,255,1);
}
</style>
</head>
<body>
<input class="abc123" type="checkbox"></input>
</body>
</html>umieść go w div i dodaj obramowanie do div