CSS Html使圖像顯示在單選按鈕的選項上（單選按鈕被CSS隱藏）

Question

我試圖讓一個圖像顯示在單選按鈕的選項上（單選按鈕被CSS隱藏） PLs檢查以下內容爵士小提琴

[鏈接]（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>

我也想控制圖像的位置。我知道它可以做到用z-index ..請幫助。需要稍作修改。

感謝

Answer 1

嘗試這樣的事情，但不是有邊界，箱陰影和背景顏色播放，使用背景圖像。

.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>

Answer 2

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

可以使用FontAwesome爲tick，而不是像

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

Answer 3

參見這些鏈接：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>