鍍金池/ 問答/HTML5  HTML/ 復(fù)選框問題,這種樣式的復(fù)選框怎么寫，求指導(dǎo)

復(fù)選框問題,這種樣式的復(fù)選框怎么寫，求指導(dǎo)

我是打算放個圖片，然后checkbox定位上去設(shè)置為透明，你們都是怎么做這種的，求哥哥指導(dǎo)一下
clipboard.png

回答
編輯回答
掛念你

一般的做法是這樣：
<label>
<input type=checkbox>
<span></span>
</label>

樣式：
input {display: none}
input+span {未選中樣式}
input:checked+span {選中后的樣式}

手機打不出反引號，見諒

2018年5月27日 20:33
編輯回答
柒槿年

不知道你要的是不是這種效果
https://codepen.io/jackpan/pe...

2017年11月21日 11:55
編輯回答
陌顏

之前剛好做了一個，我用的不是圖標(biāo)，是自己繪制的，和樓上上的方法一樣
效果圖是這樣，你可以自己修改顏色啥的：

clipboard.png

代碼如下，直接復(fù)制就可以實現(xiàn)了：

<!doctype html>
<html>
<head>
     <meta charset="utf-8">
     <title>demo</title>
     <style>
     .label{position: relative;}
     .input{display:none}
     .span{display: inline-block;width: 16px;height: 16px;border: 1px solid #fd8845;}
     .input:checked+.span:after{
         content: "";
         position: absolute;
         width: 9px;
         height: 4px;
         border: 2px solid #fd8845;
         border-top-color: transparent;
         border-right-color: transparent;
         -ms-transform: rotate(-60deg); 
         -moz-transform: rotate(-60deg); 
         -webkit-transform: rotate(-60deg); 
         transform: rotate(-45deg);}
     </style>
</head>
<body>
     <div>
         <label class="label">
             <input class="input" type="checkbox" name="">
             <span class="span"></span>
         </label>
     </div>
</body>
</html>

也可以看看我總結(jié)的步驟：
改變checkbox和radio的默認(rèn)樣式

2017年7月20日 23:12
編輯回答
懷中人

更換了一種可以兼容大多數(shù)瀏覽器的方法

<style>
/*裁剪隱藏原生input*/
.checkbox{ position: absolute;clip: rect(0, 0, 0, 0);}
/*label模擬input*/
label{position:relative; display:inline-block; width: 20px;height: 20px;background: #fff;border: 1px solid #f03e3e;}
/*勾選后更改背景*/
.checkbox:checked + label{background:#f03e3e;}
/*用偽類模擬勾選狀態(tài)的勾,大小位置可調(diào)*/
.checkbox:checked + label:before{content: "";font-family: Muiicons;font-size: 18px;font-weight: 400;color: #fff;text-decoration: none;background: 0 0;border-radius: 0;opacity: 1;border: 2px solid #fff;border-top: none;border-right: none;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);-webkit-font-smoothing: antialiased;left: 3px;top: 3px;position: absolute;width: 10px;height: 6px;}
</style>
<input type="checkbox" class="checkbox" id="checkbox"/>
<label for="checkbox"></label>

以下方法只兼容chrome,firefox,360等，ie版本不兼容，適用于web端
用偽類，具體樣式可以自己調(diào)整

<style>
.checkbox{position: relative;display: inline-block;width: 20px;height: 20px;-webkit-appearance: none;-moz-appearance: none;background: #fff;border: 1px solid #f03e3e;outline: 0!important;}
.checkbox:checked{background: #f03e3e; border: 1px solid #f03e3e;}
.checkbox:checked:before{content: "";font-family: Muiicons;font-size: 18px;font-weight: 400;color: #fff;text-decoration: none;background: 0 0;border-radius: 0;opacity: 1;border: 2px solid #fff;border-top: none;border-right: none;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);-webkit-font-smoothing: antialiased;left: 3px;top: 3px;position: absolute;width: 10px;height: 6px;}
</style>
<input type="checkbox" class="checkbox" />
2017年7月19日 08:27