1.沒有用bootstrap時：

1 .has_sel,.un_sel{display:block; width:16px; height: 16px; border: 1px solid #B06A50; border-radius: 1px; position: relative; } 2 .has_sel:before{content: ""; width: 2px; height: 6px; background-color: #B06A50; border-radius: 1px; position: absolute; left: 4px; bottom: 3px; 3 transform:rotate(-45deg); 4 -ms-transform:rotate(-45deg); /* IE 9 */ 5 -moz-transform:rotate(-45deg); /* Firefox */ 6 -webkit-transform:rotate(-45deg); /* Safari 和 Chrome */ 7 -o-transform:rotate(-45deg); /* opear */ 8 } 9 .has_sel:after{content: ""; width: 2px; height: 10px; background-color: #B06A50; border-radius: 1px; position: absolute; left: 8px; bottom: 3px; 10 transform:rotate(37deg); 11 -ms-transform:rotate(37deg); /* IE 9 */ 12 -moz-transform:rotate(37deg); /* Firefox */ 13 -webkit-transform:rotate(37deg); /* Safari 和 Chrome */ 14 -o-transform:rotate(37deg); /* opear */ 15 }

2.使用bootstrap時（因為bootstrap中css設置了*box-sizing: border-box;屬性，所以會影響定位的位置），需要將bottom下移一個像素；即bottom：2px；

3.效果圖

4.總結

之前一直用背景圖做這個記住密碼單選框，每一次這個框都大差不差，最多就是顏色差異，或者圓角直角的差異，現在用純css寫出來不僅不用每次都要作圖，而且還提高了效率。感興趣的同學可以搜索 ?pure css icon 看看，感覺很吊的樣子。

轉載于:https://www.cnblogs.com/codebook/p/5919500.html

總結

以上是生活随笔為你收集整理的纯css单选框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。