Risposte:
Se succede qualcosa in qualsiasi browser sarei sorpreso. Questo è uno di quegli straordinari elementi del modulo che i browser tendono a non lasciarti disegnare così tanto e che le persone di solito cercano di sostituire con javascript in modo che possano stile / codice qualcosa in modo che assomigli e agisca come una casella di controllo.
Suggerisco di usare "outline" invece di "border". Ad esempio: outline: 1px solid #1e5180.
!importantal tuo css quando usi outline. Lo stavo testando in Firefox 12.0 e senza! Important lo schema sarebbe svanito finché avessi fatto clic sulla casella di controllo.
Dovresti usare
-moz-appearance:none;
-webkit-appearance:none;
-o-appearance:none;Quindi ti sbarazzi dell'immagine / stile della casella di controllo predefinita e puoi modellarlo. Comunque un bordo sarà ancora lì in Firefox
Puoi usare le ombre della scatola per simulare un bordo:
-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);Ecco una soluzione cross-browser CSS (senza immagini) basata su caselle di controllo personalizzate e pulsanti di opzione di Martin con LINK CSS3: http://martinivanov.net/2012/12/21/imageless-custom-checkboxes-and-radio-buttons -con-css3-rivisitato /
Ecco un jsFiddle: http://jsfiddle.net/DJRavine/od26wL6n/
L'ho testato sui seguenti browser:
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>Non sono aggiornato, lo so .. Ma una piccola soluzione alternativa sarebbe inserire la casella di controllo all'interno di un tag etichetta, quindi applicare uno stile all'etichetta con un bordo:
<label class='hasborder'><input type='checkbox' /></label>quindi applica uno stile all'etichetta:
.hasborder { border:1px solid #F00; }label { position: relative; overflow: hidden; width: 16px; height: 16px; border: 1px solid #0f0; }e poi label > input[type=checkbox] { position: absolute; left: -999px; }Questo ti permetterà di personalizzare la tua casella di controllo e la casella di controllo originale verrà comunque selezionata / deselezionata ma l'utente non la vedrà. Vedranno solo la tua casella di controllo personalizzata.
:hovere :checkedper definire altri stati della tua casella di controllo personalizzata.
Ecco la mia versione che utilizza FontAwesome per il ticker della casella di controllo, penso che FontAwesome sia utilizzato da quasi tutti, quindi è lecito ritenere che lo possiedi anche tu. Non testato in IE / Edge e non credo che a nessuno importi.
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">Per Firefox , Chrome e Safari , non succede nulla.
Per IE il bordo viene applicato all'esterno della casella di controllo (non come parte della casella di controllo) e l'effetto di ombreggiatura "fantasia" nella casella di controllo è sparito (visualizzato come una casella di controllo vecchio stile).
Per Opera lo stile del bordo sta effettivamente applicando il bordo all'elemento casella di controllo.
Opera gestisce anche altri stili sulla casella di controllo meglio di altri browser: il colore viene applicato come colore del segno di spunta, il colore di sfondo viene applicato come colore di sfondo all'interno della casella di controllo (IE applica lo sfondo come se la casella di controllo fosse all'interno di un <div>con sfondo)) .
La soluzione più semplice è avvolgere la casella di controllo all'interno di una <div>come altri hanno suggerito.
Se vuoi controllare completamente l'aspetto dovrai usare l'approccio avanzato immagine / javascript, inteso anche da altri.
Lo stile delle caselle di controllo (e molti altri elementi di input per quel mater) non è realmente possibile con il puro css se vuoi cambiare drasticamente l'aspetto visivo.
La soluzione migliore è implementare qualcosa come jqTransform che in realtà sostituisce gli input con immagini e applica il comportamento javascript ad esso per imitare una casella di controllo (o un altro elemento per quella materia)
No, non puoi ancora modellare la casella di controllo stessa, ma ho (finalmente) capito come modellare un'illusione mentre mantenendo la funzionalità di fare clic su una casella di controllo. Significa che puoi attivarlo anche se il cursore non è perfettamente fermo senza rischiare di selezionare il testo o attivare il drag-and-drop!
L'esempio utilizza un "pulsante" di estensione e del testo in un'etichetta, ma ti dà l'idea di come puoi rendere invisibile la casella di controllo e disegnare qualsiasi cosa dietro di essa.
Questa soluzione probabilmente si adatta anche ai pulsanti di opzione.
Quanto segue funziona in IE9, FF30.0 e Chrome 40.0.2214.91 ed è solo un esempio di base. Puoi ancora usarlo in combinazione con immagini di sfondo e pseudo-elementi.
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>Ecco un modo semplice (da usare prima o dopo gli pseudo elementi / classi):
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>mettilo in un div e aggiungi il bordo al div