Ich versuche, ein Bild über Optionen eines Radio-Button erscheinen (Radio-Button ist durch CSS versteckt) PLs überprüfen Sie Folgendes js GeigeCSS Html ein Bild über Optionen eines Radio-Button erscheinen (Radio-Button ist durch CSS versteckt)

[a link] (https://jsfiddle.net/testingmilan56/rqr4dt8h/)

ul { 
 
    list-style: none; 
 
} 
 
li { 
 
    display: inline-block; 
 
    margin-right: 15px; 
 
} 
 
input { 
 
    visibility:hidden; 
 
} 
 
label { 
 
    cursor: pointer; 
 
} 
 
input:checked + label { 
 
    background:#fff000; 
 
}

<ul> 
 
    <li> 
 
     <input type='radio' value='1' name='radio' id='radio1'/> 
 
     <label for='radio1'>Value 1</label> 
 
    </li> 
 
    <li> 
 
     <input type='checkbox' value='2' name='radio' id='radio2'/> 
 
     <label for='radio2'>Value 2</label> 
 
    </li> 
 
    <li> 
 
     <input type='radio' value='3' name='radio' id='radio3'/> 
 
     <label for='radio3'>Value 3</label> 
 
    </li> 
 
</ul>

ich möchte auch die Position des Bildes steuern .I seine mögliche kennen mit z-index zu tun .. bitte helfen. Eine geringfügige Änderung ist erforderlich.

dank

Quelle

2016-04-29 Rafael Milan

Ich sehe keine Bilder in Ihrem geliefert Code? Können Sie uns ein Beispiel dafür geben, was genau Sie erreichen möchten? – Shaggy

pls goto ipsy dot com und sehen Sie das Quiz .No gibt es noch kein Bild in meinem Code .I kann Bild später hinzufügen. –

was hast du bisher probiert? nur die css und html zu zeigen, zeigt uns nicht, wie Sie das Thema angesprochen haben. Hilfe wird nur denen gegeben, die bereits versucht haben, aber versagt haben ... – errand

so etwas wie dies versucht, sondern mit Grenzen zu spielen, Box-Schatten und Hintergrund-Farben, Hintergrund-Bilder verwenden.

.container { 
 
    margin: 32px auto; 
 
} 
 
input { 
 
    display: none; 
 
} 
 
label { 
 
    display: block; 
 
} 
 
input + label:before { 
 
    box-sizing: border-box; 
 
    display: inline-block; 
 
    position: relative; 
 
    content: ''; 
 
    width: 1em; 
 
    height: 1em; 
 
    box-shadow: 0 0 0 1px black; 
 
    margin-right: 0.25em; 
 
    top: .2em; 
 
} 
 

 
input:checked + label:before { 
 
    border: 2px solid white; 
 
    background: lime;; 
 
} 
 

 
input[type=radio] + label:before { 
 
    border-radius: 50%; 
 
}

<div class="container"> 
 
    <input type="checkbox" id="check-1" name="check-1" /> 
 
    <label for="check-1">Label 1</label> 
 
    <input type="checkbox" id="check-2" name="check-2" /> 
 
    <label for="check-2">Label 2</label> 
 
    <input type="checkbox" id="check-3" name="check-3" /> 
 
    <label for="check-3">Label 3</label> 
 
    <input type="checkbox" id="check-4" name="check-4" /> 
 
    <label for="check-4">Label 4</label> 
 
    <input type="checkbox" id="check-5" name="check-5" /> 
 
    <label for="check-5">Label 5</label> 
 

 
    <hr /> 
 

 
    <input type="radio" id="radio-1" name="radio" /> 
 
    <label for="radio-1">label 1</label> 
 
    <input type="radio" id="radio-2" name="radio" /> 
 
    <label for="radio-2">label 2</label> 
 
    <input type="radio" id="radio-3" name="radio" /> 
 
    <label for="radio-3">label 3</label> 
 
    <input type="radio" id="radio-4" name="radio" /> 
 
    <label for="radio-4">label 4</label> 
 
    <input type="radio" id="radio-5" name="radio" /> 
 
    <label for="radio-5">label 5</label> 
 
</div>

Quelle

2016-04-29 09:48:27 Pjetr

<ul> 
    <li> 
     <input type='radio' value='1' name='radio' id='radio1'/> 
     <label for='radio1'>Value 1</label> 
    </li> 
    <li> 
     <input type='checkbox' value='2' name='radio' id='radio2'/> 
     <label for='radio2'>Value 2</label> 
    </li> 
    <li> 
     <input type='radio' value='3' name='radio' id='radio3'/> 
     <label for='radio3'>Value 3</label> 
    </li> 
</ul> 

ul { 
    list-style: none; 
    padding: 0; 
    overflow: hidden; 
} 
li { 
    float: left; 
    width: 100px; 
    position: relative; 
    height: 100px; 
} 
input { 
    visibility:hidden; 
} 
label { 
    cursor: pointer; 
} 
input + label{ 
    position: absolute; 
    bottom: 0; 
} 
input + label:before { 
    background: #fff000; 
    position: absolute; 
    border-radius: 50%; 
    width: 70px; 
    height: 70px; 
    line-height: 70px; 
    bottom: 25px; 
    left: 50%; 
    display: block; 
    content: ''; 
    text-align: center; 
    margin-left: -35px; 
} 
input:checked + label:before {  
    content: 'TICK';  
}

Sie können FontAwesome für tick, anstelle des Bildes

https://jsfiddle.net/rqr4dt8h/1/

Quelle

2016-04-29 10:04:10

über diesen Link finden: Link1

.radio_item { 
 
     display: none !important; 
 
    } 
 
    .label_item { 
 
     opacity: 0.1; 
 
    } 
 
    .radio_item:checked + label { 
 
     opacity: 1; 
 
    } 
 
    label { 
 
     cursor: pointer; 
 
    }

<!--RADIO 1--> 
 
<input type="radio" class="radio_item" value="" name="item" id="radio1"> 
 
<label class="label_item" for="radio1"> 
 
    <img src="http://i.stack.imgur.com/FSN1q.png"> 
 
</label> 
 

 
<!--RADIO 2--> 
 
<input type="radio" class="radio_item" value="" name="item" id="radio2"> 
 
<label class="label_item" for="radio2"> 
 
    <img src="http://i.stack.imgur.com/FSN1q.png"> 
 
</label>

Quelle

2016-04-29 10:04:33 Shashikala

CSS Html ein Bild über Optionen eines Radio-Button erscheinen (Radio-Button ist durch CSS versteckt)

dank

Antwort

Verwandte Themen