常常能看到別人做前端的時候,實現一些漂亮的複選框或單選框按鈕,由於現在項目原因,很多單選框和復選框看起來很不好看,於是,心血來潮打算自己實現了一遍。
一、首先上css代碼:
一、首先上css代碼:
其中,說明我以註釋的形式寫到裡面;
關於z-index我是基於一開始的定位考慮來設定的,此處定位考慮是誰要用到,自行思考;
/*复选框效果*/ input[type=checkbox] { width:16px; height:16px; z-index:10; } /* 此处不解释,定义的是复选框宽高*/ input[type=checkbox]::before { content:" "; display:inline-block; color:#000; width:16px; height:16px; background:#fff; border:1px #1ab394 solid; z-index:9; position: absolute; }/* 此处定义的是在没有选中的情况下的样式,利用::before设置空的content实现 */ input[type=checkbox]:checked::before { content:"\f00c"; color:#1ab394; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 此处定义复选框选中时候的样式,此处 在before的content里使用\f00c的awesome字体来实现,这个字体值表示打勾*/ /* 单选框效果 */ input[type=radio] { width:16px; height:16px; z-index:10; } input[type=radio]::before { content:" "; display:inline-block; color:#000; width:16px; height:16px; border-radius:8px; background:#fff; border:1px #1ab394 solid; z-index:9; position: absolute; } input[type=radio]:checked::after { content:" "; display:inline-block; width:8px; height:8px; background:#1ab394; border-radius:50%; position:absolute; z-index:11; top:4px; left:4px; } /*以上的单选框和复选框类似,但此处选中不是采用更换字体,目前来说,没发现有适合的字体适用于里面的圆点,所以采用after设置一个长宽为8像素的块并设置圆角调整位置放到外层边框内容里实现*/
一、首先上css代碼:
一、首先上css代碼:
其中,說明我以註釋的形式寫到裡面;
關於z-index我是基於一開始的定位考慮來設定的,此處定位考慮是誰要用到,自行思考;/*复选框效果*/ input[type=checkbox] { width:16px; height:16px; z-index:10; } /* 此处不解释,定义的是复选框宽高*/ input[type=checkbox]::before { content:" "; display:inline-block; color:#000; width:16px; height:16px; background:#fff; border:1px #1ab394 solid; z-index:9; position: absolute; }/* 此处定义的是在没有选中的情况下的样式,利用::before设置空的content实现 */ input[type=checkbox]:checked::before { content:"\f00c"; color:#1ab394; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* 此处定义复选框选中时候的样式,此处 在before的content里使用\f00c的awesome字体来实现,这个字体值表示打勾*/ /* 单选框效果 */ input[type=radio] { width:16px; height:16px; z-index:10; } input[type=radio]::before { content:" "; display:inline-block; color:#000; width:16px; height:16px; border-radius:8px; background:#fff; border:1px #1ab394 solid; z-index:9; position: absolute; } input[type=radio]:checked::after { content:" "; display:inline-block; width:8px; height:8px; background:#1ab394; border-radius:50%; position:absolute; z-index:11; top:4px; left:4px; } /*以上的单选框和复选框类似,但此处选中不是采用更换字体,目前来说,没发现有适合的字体适用于里面的圆点,所以采用after设置一个长宽为8像素的块并设置圆角调整位置放到外层边框内容里实现*/
二、最後呈現的效果:
🎜🎜🎜🎜🎜🎜🎜🎜