整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
label{
margin:5px;
}
.input-radio{
display: none;
}
.span-radio{
display: inline-block;
border:1px solid #ccc;
width:16px;
height: 16px;
border-radius:2px;
vertical-align: middle;
margin-right: 5px;
position: relative;
}
.span-radio:before{
content: '';
font-size: 0;
width: 10px;
height: 10px;
background: blue;
position: absolute;
left:50%;
top:50%;
margin-left: -5px;
margin-top: -5px;
border-radius: 2px;
display: none;
}
/* ~代表選擇checked的后面的兄弟節點,顯示選中背景框*/
.input-radio:checked~.span-radio:before{
display: block;
}
</style>
</head>
<body>
<label>
<input type="radio" name="evaluate" id="radio1" class="input-radio">
<span class="span-radio"></span>優
</label>
<label>
<input type="radio" name="evaluate" id="radio2" class="input-radio">
<span class="span-radio"></span>良
</label>
<label>
<input type="radio" name="evaluate" id="radio3" class="input-radio">
<span class="span-radio"></span>中
</label>
</body>
</html>
果圖
天和大家分享如何修改radio樣式
自定義顏色
自定義圖片
全部代碼直接可以運行，兼容性ie，火狐，谷歌
景：自帶的單選按鈕真的是很不好看，這時候需要radio的自定義美化
Html 布局
<ul class="prize-choose">
<?php foreach ($goods as $key=> $data){?>
<li class="item">
//選中區域的熱區
<label for="radio<?=$key +1 ?>" style="display: block;">
<img src="">
<p><?=!empty($data['name'])?$data['name']:'暫無名稱'?></p>
<div class="detail"><?=$data['detail']?></div>
<div class="price">
<p>
<span class="now_price"><?=$data['sale_price']?></span>
<del>￥<?=$data['fix_price']?></del>
</p>
<div class="prize-radio" goods-price="<?=$data['sale_price']?>" goods-id="<?=$data['goods_id']?>">
<input type="radio" id="radio<?=$key +1 ?>" name="prizeradio">
<label for="radio<?=$key +1 ?>"></label>
</div>
</div>
</label>
</li>
<?php }?>
</ul>
單選的局部代碼 //常規狀態
<div class="prize-radio">
<input type="radio" id="radio<?=$key +1 ?>" name="prizeradio">
<label for="radio<?=$key +1 ?>"></label>
</div>
//選中狀態，同radio
<input type="checkbox" id="awesome1" checked>
//常規不可點
<input type="checkbox" id="awesome2" disabled>
//選中不可點擊
<input type="checkbox" id="awesome3" disabled class="checked">css 美化
.prize-radio{
input[type="radio"] {
position: absolute;
clip: rect(0, 0, 0, 0);
}
input[type="radio"] + label {
cursor: pointer;
position: relative;
line-height: 12px;
user-select: none;
}
input[type="radio"] + label:not(:nth-of-type(1)) {
margin-top: 29px;
margin-bottom: 29px;
}
input[type="radio"]:checked + label{
color: #0091FF;
}
//單選框的樣式
input[type="radio"] + label::before{
content: "";
display: inline-block;
width: 24px; height: 24px;
border-radius: 50%;
vertical-align: top;
margin-right: .2em;
border: 1px solid #ccc;
background-color: #fff;
transition: border-color .2s ease-in-out, background-color .2s ease-in-out;
}
input[type="radio"]:not(:disabled) + label:hover::before{
border-color: #0091FF;
}
//（制作樣式1）對勾樣式制作1
input[type="radio"] + label::after{
content: "";
display: inline-block;
width: 5px;
height: 13px;
border: 2px solid #fff;
border-top: 0;
border-left: 0;
position: absolute;
left: 9px;
top: 3px;
transform: rotate(45deg) scale(0);
transition: all .2s ease-in-out;
}
input[type="radio"]:checked + label::before{
border-color: #0091FF !important;
background-color: #0091FF;
}
input[type="radio"]:checked + label::after{
transform: rotate(45deg) scale(1);
transition: all .2s ease-in-out;
}
//不可點擊的背景色設置-----不常用
input[type="checkbox"]:disabled + label::before,
input[type="checkbox"]:disabled.checked + label::before{
background-color: #f2f2f2;
}
//不可點擊的文本框對勾顏色設置--不常用
input[type="checkbox"]:disabled.checked + label::after{
border-color: #ccc;
transform: rotate(45deg) scale(1);
}
//****制作樣式1 end******
//***（制作樣式2）圓圈
//after單選框中間的選中效果
input[type="radio"] + label::after {
content: "";
display: inline-block;
width: 4px;
height: 4px;
background-color: #fff;
border-radius: 4px;
position: absolute;
left: 4px; top: 50%;
transform: translateY(-50%) scale(0);
transition: transform .2s ease-in-out;
}
input[type="radio"]:checked + label::after {
transform: translateY(-50%) scale(1);
transition: transform .2s ease-in-out;
}
//disabled 不常用
input[type="radio"]:disabled + label::before,
input[type="radio"]:disabled.checked + label::before {
background-color: #f2f2f2;
}
//不常用
input[type="radio"]:disabled.checked + label::after {
border-color: #ccc;
background-color: #ccc;
transform: translateY(-50%) scale(1);
}
//****制作樣式2 end******
}js傳參數操作：尤其涉及到交互，需要把選中商品的的id呀，價格呀，傳遞給后臺，這時候就常用的東西都如下操作啦
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
