鍍金池/ 問答/HTML/ 運(yùn)用偽類實(shí)現(xiàn)復(fù)選框的樣式問題

運(yùn)用偽類實(shí)現(xiàn)復(fù)選框的樣式問題

樣式代碼：

input[type="checkbox"] {
    border: 1px solid #a9afb4;
    text-align: center;
    padding: 0;
    margin: 0;
    width: 16px;
    height: 16px;
    background: white;
    -webkit-appearance: none;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    vertical-align: middle;
    color: #fff;
    transition: all 0.1s linear;
    cursor: pointer;
  }

  input[type="checkbox"]:before {
    content: "?";
    font-size: 8px;
  }


  input[type="checkbox"]:checked {
    background: #0AA89E;
    border: none;
    color: #fff;
  }

clipboard.png

如果里面的勾號不用特殊字符打上去的話，可以用什么樣式實(shí)現(xiàn)，請大神們幫幫忙看看？？

回答
編輯回答
焚音

content: '\2714';你可以參考HTML CSS 特殊字符表，我寫的幾個復(fù)選框鏈接描述，當(dāng)然你要正規(guī)點(diǎn)的還是推薦用字體圖標(biāo)庫來搞

2017年9月25日 09:20
編輯回答
失魂人

樓上說的特殊字符表好像更方便一點(diǎn)，我這里再說一個方法吧：

大致思路：如果想要一個勾號，先設(shè)置div的width和height，再設(shè)置邊框粗細(xì)，類型和顏色，最后將上邊框和左邊框去掉，這時，邊框就只剩下右邊框和下邊框，只要將此div旋轉(zhuǎn)45度，就可以了

代碼大致如下：

.xxx-radio:checked+.xxx-radio-label:after {
    width: 5px;
    height: 10px;
    border: 2px solid rgba(25,164,137,1);
    border-top: none;
    border-left: none;
    transform: rotate(45deg)
}
2017年8月19日 13:29