使用css修改input框中checkbox的样式 |
您所在的位置:网站首页 › 改变复选框背景颜色 › 使用css修改input框中checkbox的样式 |
概述
在页面设计时,我们经常使用input复选框。由于界面设计的需要,我们需要修改复选框的样式,使得界面更美观或者适应新的需求。由于CheckBox伪类修改比较复杂,通常修改的方式有两种,一个是链入图片,另一个是使用纯css的方法进行修改。链入图片的设计方式比较简单,但是需要预先设计或者下载图片,比较麻烦。纯css的方法,只需要在css文件中编写代码,个人觉得比较方便,因此,本文使用该方式对input中的CheckBox进行设置。 实现效果本文在设计时,希望达到以下效果,如图所示,每个带颜色的方块都是有input框组成,每个input框的背景色不同,并且,再点击时,只能同时选中一个input框(实现效果相当于radio)。 在设计时,我们使用标签的for属性,绑定到input标签上(for属性应对应到input标签中的id)。在jsp代码中设计如下所示: 接下来我们在css文件中设置lable标签的显示样式: /*lable标签的大小、位置、背景颜色更改,在css选择时,“+”代表相邻元素,即当前元素的下一元素*/ #color-input-red +label{ display: block; width: 20px; height: 20px; cursor: pointer; position: absolute; top: 2px; left: 15px; background: rgba(240, 84, 77, 1);; } /*当input框为选中状态时,lable标签的样式,其中在css选择时,“:”表示当前input框的值,即checked; 该部分主要对显示的“对号”的大限居中方式,显示颜色进行了设置*/ #color-input-red:checked +label::before{ display: block; content: "\2714"; text-align: center; font-size: 16px; color: white; }其中里面的content表示在方框中显示的内容,"\2714"、"\2713"都表示对号,只是显示的瘦弱程度不同,大家可以在调试的时候,选择其中一个。对于css中的内容,我们可以根据需要设置为自己的内容。 最后我们在css中将原先的input[type=checkbox]的内容进行隐藏。 input[type=checkbox]{ visibility: hidden; }最终的显示效果如下: 单个input框实现完成以后,同理,其他的input框实现也据此实现。使用的jsp代码如下(里面的div标签只是为布局使用): css代码如下如所示: /*input框中颜色更改*/ #color-input-red +label{ display: block; width: 20px; height: 20px; cursor: pointer; position: absolute; top: 2px; left: 15px; background: rgba(240, 84, 77, 1);; } #color-input-red:checked +label::before{ display: block; content: "\2714"; text-align: center; font-size: 16px; color: white; } input[type=checkbox]{ visibility: hidden; } #color-input-orange +label{ display: block; width: 20px; height: 20px; cursor: pointer; position: absolute; top: 2px; left: 15px; background: rgba(234, 152, 54, 1); } #color-input-orange:checked +label::before{ display: block; content: "\2714"; text-align: center; font-size: 16px; color: white; } #color-input-yellow +label{ display: block; width: 20px; height: 20px; cursor: pointer; position: absolute; top: 2px; left: 15px; background: rgba(230, 192, 58, 1); } #color-input-yellow:checked +label::before{ display: block; content: "\2714"; text-align: center; font-size: 16px; color: white; } #color-input-green +label{ display: block; width: 20px; height: 20px; cursor: pointer; position: absolute; top: 2px; left: 15px; background: rgba(95, 189, 65, 1); } #color-input-green:checked +label::before{ display: block; content: "\2714"; text-align: center; font-size: 16px; color: white; } #color-input-blue +label{ display: block; width: 20px; height: 20px; cursor: pointer; position: absolute; top: 2px; left: 15px; background: rgba(61, 170, 230, 1); } #color-input-blue:checked +label::before{ display: block; content: "\2714"; text-align: center; font-size: 16px; color: white; } #color-input-purple +label{ display: block; width: 20px; height: 20px; cursor: pointer; position: absolute; top: 2px; left: 15px; background: rgba(195, 122, 211, 1); } #color-input-purple:checked +label::before{ display: block; content: "\2714"; text-align: center; font-size: 16px; color: white; }此时的效果为: 颜色可以全部改变,但是可以全部选中,无法保证只能选择其中一个,为了实现该功能,我们添加js代码。思路为:当点击其中一个复选框时,我们将所有的复选框都进行取消选中处理,然后对当前的复选框单独添加选中状态。 //取消掉所有选择的颜色 function cancelChooseColor( clickId ){ var inputColor = $('#color-input-green').parents(".chat-windows-color-div ").find("input"); for(var i=0;i |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |