Styling Radioeingänge Ausgabe

Ich möchte Radio-Eingang INSIDE "Label" Tags stylen. Ich habe bereits die Hintergrundfarbe geändert, aber wenn ich auf meinen Radio weißen Punkt innen klicke, erscheint nicht. Ich habe einen Code dafür geschrieben und ich weiß wirklich nicht, was das Problem ist.Styling Radioeingänge Ausgabe

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
    <meta charset="UTF-8" /> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
 
    <style> 
 
     label { 
 
     display: inline-block; 
 
     cursor: pointer; 
 
     position: relative; 
 
     padding-left: 25px; 
 
     margin-right: 15px; 
 
     font-size: 13px; 
 
     display:block; 
 
     } 
 

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

 
     label:before { 
 
     content: ""; 
 
     display: inline-block; 
 
     width: 17px; 
 
     height: 17px; 
 
     margin-right: 10px; 
 
     position: absolute; 
 
     left: 0; 
 
     bottom: 1px; 
 
     background-color: #ff7900; 
 
     box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8); 
 
     border-radius: 8px; 
 
     } 
 

 
     input[type=radio]:checked + label:before { 
 
     content: "\2022"; 
 
     color: #f3f3f3; 
 
     font-size: 30px; 
 
     text-align: center; 
 
     line-height: 18px; 
 
     position: absolute; 
 
     } 
 

 
     .input { 
 
     font-size: 20px; 
 
     font-weight: bold; 
 
     } 
 
    </style> 
 
    </head> 
 
    <body> 
 
    <form> 
 
     <label class="input"><input type="radio" name="number" class="hehe">xxxxxxxx</label> 
 
     <label class="input" ><input type="radio" name="number" class="hehe">xxxxxxx</label> 
 
     <label class="input"><input type="radio" name="number" class="hehe">xxxxxxx</label>\ 
 
     <label class="input"><input type="radio" name="number" class="hehe">xxxxxxx</label> 
 
    </form> 
 
    </body> 
 
</html>

Quelle

2016-07-18 Mikołaj Popieluch

Es gibt keine Eltern Selektor in CSS –

Dieses:

input[type=radio]:checked + label:before

erfordert, dass der label sofort die Eingabe folgen.

jedoch Ihre HTML ist

<label class="input"><input type="radio" name="number" class="hehe">xxxxxxxx</label>

Das Label den Eingang umgibt und so wird der Wähler nicht.

Sie müssten

<input type="radio" name="number" class="hehe"/><label class="input">xxxxxxxx</label>

Alternativ; verwenden, um eine pseudo-Element auf einem span im Inneren des Etiketts eher als das Etikett selbst

<label class="input"> 
    <input type="radio" name="number" class="hehe"> 
    <span>xxxxxxxx</span> 
</label>

mit

input[type=radio]:checked + span:before

Quelle

2016-07-18 12:13:45

Okay, aber wie ein I befestigen Sie ihn mit Eingabe INSIDE Etikett? :) –

@ MikołajPopieluch du brauchst ** irgendeinen ** Knoten nach der Eingabe. Sie können sagen, "span" nach der "Eingabe" ** innerhalb der "label" –

Hinzufügen für Radio auswählen Label: xxxxxxxx –

-1

können Sie diesen Code versuchen. Was Paulie gesagt hat, ist richtig.

label { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    margin-left: 30px; 
 
    cursor: pointer; 
 
} 
 
input[type="radio"] { 
 
    display: none; 
 
} 
 
input[type=radio] + label:before { 
 
    content: ''; 
 
    width: 24px; 
 
    height: 24px; 
 
    background: tomato; 
 
    border-radius: 50%; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    margin-right: 5px; 
 
    z-index: 5; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
input[type=radio]:checked + label:after { 
 
    content: ''; 
 
    width: 16px; 
 
    height: 16px; 
 
    background: white; 
 
    border-radius: 50%; 
 
    display: inline-block; 
 
    z-index: 10; 
 
    position: absolute; 
 
    top: 4px; 
 
    left: 4px; 
 
} 
 
div { 
 
    margin-bottom: 15px; 
 
    position: relative; 
 
}

<div> 
 
    <input type="radio" name="test" id="one"> 
 
    <label for="one">XXXXXXXXXXXX</label> 
 
</div> 
 
<div> 
 
    <input type="radio" name="test" id="two"> 
 
    <label for="two">xxxx</label> 
 
</div> 
 
<div> 
 
    <input type="radio" name="test" id="three" checked> 
 
    <label for="three">xxxxxxxxxxxxx</label> 
 
</div>

Quelle

2016-07-18 12:39:53

Wenn Sie irgendeine Antwort in-geeignet finden, so während DownVoting es, die Höflichkeit haben, es in Kommentaren zu erklären. Es sei denn, es ist die falsche Antwort –

Styling Radioeingänge Ausgabe

Antwort

Verwandte Themen