css更改input單選和多選的樣式詳解

在專案開發中我們常常會遇到需要更改input單選和多選樣式的情況，今天就跟大家介紹一個簡單改變input單選和多選樣式的方法。

在這之前先簡單介紹一下:before偽類別

:before 選擇器向選定的元素前插入內容。使用content 屬性來指定要插入的內容（content是必須的）。

相信這並不難以理解，接下來我們先理解思路：

（1）首先在html用label為input 元素定義標記，也就是當你點擊label標籤時對應的input也會選取或取消

（2）接下來就是寫css了，將input隱藏，只需要在label之前加入你的樣式就好了，可以是圖片也可以是自己畫的圓圈，下面的例子是我寫的圓，當然也可以換成背景圖。

input[type="radio"]+label:before是未选中状态的样式

input[type="radio"]:checked+label:before是选中状态的样式

<input type="radio" id="nationality1"><label for="nationality1">中国</label></p>

input[type="radio"]{
    display:none;
}
input[type="radio"]+label{
    position: relative;
}
input[type="radio"]+label:before{
    content: "";
    width:25px;
    height:25px;
    background: #ffffff;
    border:2px solid $gray;
    position: absolute;
    bottom:3px;
    left: -35px;
    border-radius: 50%;
}                                                   
input[type="radio"]:checked+label:before{
    content: "";
    width: 25px;
    height: 25px;
    background: #34c0f5;
    position: absolute;
    bottom:3px;
    left: -35px;
    z-index: 99;
    border-radius: 50%;
}

把radio換成checkbox就是多選的啦。

註：隱藏與偽類定位是關鍵

以上是css更改input單選和多選的樣式詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！