Rimuovere il cerchio di confine dall'ingresso radio

Volevo utilizzare l'immagine anziché i normali ingressi radio.Rimuovere il cerchio di confine dall'ingresso radio

ho fatto in questo modo:

input[type="radio"]{ 
    content:url('/images/new-home-page/Checkbox.png'); 
    height:3vh; 
    width:3vh; 
} 
input[type="radio"]:checked{ 
    content:url('/images/new-home-page/checkedCheckbox.png'); 
}

Purtroppo, hanno cerchi intorno a loro. Ho provato a usare border:none o text-decoration:none ma non aiuta. Qualcuno potrebbe aiutarmi con questo per favore?

Sembrano adesso:

fonte

2015-12-15 divHelper11

Hai provato 'contorno: none'? –

perché il contenuto non è in background? Non l'ho mai usato prima di – yaochiqkl

Fuori di interesse, perché stai usando un'immagine di casella di controllo con un'interfaccia pulsante di opzione? Non dovresti usare '' s in modo da non confondere le aspettative di comportamento dell'utente? –

vorrei chiedere di utilizzare la proprietà appearance di CSS, che è responsabile per la componenti come questo. Quindi l'impostazione di appearance: none creerà un tipo di display: none per l'aspetto del componente, che è ciò che è necessario per te. Tu sei buono per utilizzare questo po 'di CSS per rendere il componente non viene visualizzato, mantenendo l'elemento nella vista:

-webkit-appearance: none; 
-moz-appearance: none; 
-ms-appearance: none; 
-o-appearance: none; 
appearance: none;

Snippet

input { 
 
    content: url('http://i.stack.imgur.com/M3EkO.png'); 
 
    height: 16px; 
 
    width: 16px; 
 
    -webkit-appearance: none; 
 
    -moz-appearance: none; 
 
    appearance: none; 
 
} 
 
input:checked { 
 
    content: url('http://i.stack.imgur.com/Ialva.png'); 
 
}

Checkbox: 
 
<input type="checkbox" name="" id="" /> <br /> 
 
Radios: 
 
<input type="radio" name="Hi" id="" /> 
 
<input type="radio" name="Hi" id="" />

uscita: http://output.jsbin.com/digebimolu/1

fonte

2015-12-15 10:16:08

@ divHelper11 Dai un'occhiata allo snippet che ho aggiunto. –

@ divHelper11 L'unico svantaggio di questa soluzione, non funzionerà su IE 8,9,10,11. Controlla la mia risposta se ne hai bisogno. – LGSon

@LGSon Il contenuto dell'OP 'content: url()' non funziona in IE 10 e sotto !!! Controlla questo: http://stackoverflow.com/questions/16132460/css-url-not-recognized-in -internet-explorer-10 –

Aggiungi questo nel vostro file CSS:

input[type=radio]{ 
    display:none; 
}

fonte

2015-12-15 10:11:27

Seriamente? 'display: none'? –

Grazie per la risposta. 'display: none' fa sparire le mie checkbox. Sto sbagliando? – divHelper11

@ divHelper11 GLP è sbagliato. Non ti preoccupare Ottenendo una soluzione corretta. –

suggerirei un'intera altra soluzione.

input[type="checkbox"], input[type="radio"] { 
 
    display:none; 
 
} 
 
input[type="checkbox"] + label{ 
 
    padding-left:35px; 
 
} 
 
input[type="checkbox"] + label span { 
 
    display:inline-block; 
 
    width:52px; /* width of the checkbox */ 
 
    height:53px; /* height of the checkbox */ 
 
    margin:-1px 10px 0 -35px; 
 
    vertical-align:middle; 
 
    background:url('http://i.stack.imgur.com/M3EkO.png') left top no-repeat; 
 
    cursor:pointer; 
 
} 
 

 
/* replaces the image if checked.*/ 
 
input[type="checkbox"]:checked + label span { 
 
    background:url('http://i.stack.imgur.com/Ialva.png') left top no-repeat; 
 
}

<input id="cb" value="" type="checkbox"> 
 
<label for="cb"><span></span> Text</label>

Con questa soluzione non avrete alcun problema in tutti i browser. Nasconde la casella di controllo, ma funziona ancora perché è possibile fare clic sull'etichetta, che è collegata alla casella di controllo. In questa etichetta c'è un intervallo con l'immagine di sfondo e le dimensioni di esso. Quindi sembra ancora come una casella di controllo e la tua casella di controllo nascosto sarà "controllato" o "incontrollato"

fonte

2015-12-15 10:20:41 Aytee

Si deve nascondere i pulsanti di opzione e aggiungere altri elementi come <span> e <label>

Ecco come dovrebbe funzionare: http://jsfiddle.net/etz9Lfat/

fonte

2015-12-15 10:25:33 MurDaD

Devi aggiungere codice alla tua risposta. jsfiddle. –

@PraveenKumar ci vuole solo una piccola spiegazione, che puoi vedere in alto – MurDaD

@PraveenKumar la tua risposta non ha alcuna spiegazione a tutti BTW :) – MurDaD

Ecco un'altra soluzione interessante, che utilizza lo pseudo elemento, in cui si elimina anche il contorno di messa a fuoco circostante.

Il bello con questo è che funziona anche su IE 8-11, che sfortunatamente la soluzione migliore con appearence no.

input[type="radio"] { 
 
    display:none; 
 
} 
 
input[type="radio"] + label { 
 
    position: relative; 
 
    padding-left: 54px; 
 
    cursor:pointer; 
 
    font-size: 26px; 
 
} 
 
input[type="radio"] + label:before { 
 
    content: ""; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 50%; 
 
    margin-top: -22px; 
 
    width:46px; 
 
    height:46px; 
 
    background: url('http://i.stack.imgur.com/M3EkO.png'); 
 
    background-size: contain; 
 
} 
 
input[type="radio"]:checked + label:before { 
 
    background: url('http://i.stack.imgur.com/Ialva.png'); 
 
}

<input id="cb" value="1" name="cb" type="radio"> 
 
<label for="cb">Text 1</label> 
 
<input id="cb2" value="2" name="cb" type="radio"> 
 
<label for="cb2">Text 2</label>

fonte

2015-12-15 10:56:06 LGSon

Rimuovere il cerchio di confine dall'ingresso radio

risposta

Problemi correlati