Entfernen Sie den Randkreis vom Radio-Eingang

Ich wollte Bild anstelle von normalen Radio-Eingaben verwenden.Entfernen Sie den Randkreis vom Radio-Eingang

ich es so gemacht:

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'); 
}

Leider haben sie Kreise um sie herum. Ich habe versucht, border:none oder text-decoration:none zu verwenden, aber es hilft nicht. Könnte mir bitte jemand damit helfen?

Sie sehen aus wie dies jetzt:

Quelle

2015-12-15 divHelper11

Haben Sie 'Umriss versucht: none'? –

Warum ist Inhalt, nicht Hintergrund? Ich habe es nie zuvor verwendet – yaochiqkl

Aus Interesse, warum verwenden Sie ein Kontrollkästchen Bild mit einem Radio-Button-Schnittstelle? Sollten Sie nicht die Checkbox "

Ich würde Sie bitten die appearance Eigenschaft von CSS zu verwenden, die für das verantwortlich ist, Komponenten wie diese. Wenn Sie also appearance: none setzen, wird eine Art display: none zum Erscheinungsbild der Komponente, die für Sie benötigt wird. Sie sind gut, dieses bisschen CSS zu verwenden, die Komponente nicht angezeigt zu machen, während das Element im Auge behalten:

-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="" />

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

Quelle

2015-12-15 10:16:08

@ divHelper11 Sehen Sie sich das Snippet an, das ich hinzugefügt habe. –

@ divHelper11 Der einzige Nachteil, den diese Lösung hat, wird nicht auf IE 8,9,10,11 funktionieren. Überprüfen Sie meine Antwort, wenn Sie das brauchen. – LGSon

@LGSon Der OP-Code 'content: url()' funktioniert nicht in IE 10 und darunter !!! Überprüfen Sie dies: http://StackOverflow.com/questions/16132460/Css-url-not-recognized-in -internet-explorer-10 –

Fügen Sie diese in Ihrem CSS-Datei:

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

Quelle

2015-12-15 10:11:27

Ernsthaft? 'Anzeige: keine'? –

Vielen Dank für die Antwort. 'display: none' lässt meine Checkboxen verschwinden. Mache ich es falsch? – divHelper11

@ divHelper11 GLP ist falsch. Mach dir keine Sorgen. Eine richtige Lösung für Sie finden. –

würde ich eine ganz andere Lösung vorschlagen.

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>

Mit dieser Lösung werden Sie nicht in allen Browsern keine Probleme haben. Es wird das Kontrollkästchen selbst ausblenden, aber es funktioniert immer noch, weil Sie auf das Label klicken können, das mit dem Kontrollkästchen verbunden ist. In diesem Etikett gibt es eine Spanne mit Ihrem Hintergrundbild und den Größen davon. So sieht es immer noch wie ein Kontrollkästchen und Ihre verborgene Checkbox wird „geprüft“ oder „ungeprüft“

Quelle

2015-12-15 10:20:41 Aytee

Sie müssen Radio-Buttons verstecken und weitere Elemente wie <span> und <label>

hier hinzufügen wird, wie es funktionieren soll: http://jsfiddle.net/etz9Lfat/

Quelle

2015-12-15 10:25:33 MurDaD

Sie müssen Code zu Ihrer Antwort hinzufügen. Sollte nicht nur zu verknüpfen jsfiddle –

@PraveenKumar es braucht nur eine kleine Erklärung, die Sie auf der Oberseite sehen können – MurDaD

@PraveenKumar Ihre Antwort hat keine Erklärung BTW :) – MurDaD

Hier ist eine weitere interessante Lösung, mit Pseudo-Element, wo Sie auch die umliegenden Fokus Outline loswerden.

Das wirklich gut mit diesem ist es funktioniert auf IE 8-11 auch, die leider die bessere Lösung mit appearence nicht tun.

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>

Quelle

2015-12-15 10:56:06 LGSon

Entfernen Sie den Randkreis vom Radio-Eingang

Antwort

Verwandte Themen