我试图使用以下样式的复选框:
<输入类型=“checkbox”样式=“border:2px点数:00f;显示:block;背景:ff0000;”/>
但是没有应用样式。复选框仍然显示其默认样式。我如何给它指定的样式?
我试图使用以下样式的复选框:
<输入类型=“checkbox”样式=“border:2px点数:00f;显示:block;背景:ff0000;”/>
但是没有应用样式。复选框仍然显示其默认样式。我如何给它指定的样式?
当前回答
这是最简单的方法,你可以选择哪个复选框来提供这种样式。
CSS:
.check-box input {
display: none;
}
.check-box span:before {
content: ' ';
width: 20px;
height: 20px;
display: inline-block;
background: url("unchecked.png");
}
.check-box input:checked + span:before {
background: url("checked.png");
}
HTML:
<label class="check-box">
<input type="checkbox">
<span>Check box Text</span>
</label>
其他回答
我总是使用伪元素:before和:after来改变复选框和单选按钮的外观。它很有魔力。
更多信息请参考这个链接
CODEPEN
步骤
使用css规则隐藏默认复选框,如可见度:hidden或不透明度:0或位置:absolute;left:-9999px等。 使用:before元素创建一个假复选框,并传递一个空的或不间断的空格'\00a0'; 当复选框处于:checked状态时,传递unicode内容:"\2713",这是一个复选标记; 添加:焦点样式,使复选框可访问。 完成
我是这样做的。
.box { background: #666666; color: #ffffff; width: 250px; padding: 10px; margin: 1em auto; } p { margin: 1.5em 0; padding: 0; } input[type="checkbox"] { visibility: hidden; } label { cursor: pointer; } input[type="checkbox"] + label:before { border: 1px solid #333; content: "\00a0"; display: inline-block; font: 16px/1em sans-serif; height: 16px; margin: 0 .25em 0 0; padding: 0; vertical-align: top; width: 16px; } input[type="checkbox"]:checked + label:before { background: #fff; color: #333; content: "\2713"; text-align: center; } input[type="checkbox"]:checked + label:after { font-weight: bold; } input[type="checkbox"]:focus + label::before { outline: rgb(59, 153, 252) auto 5px; } <div class="content"> <div class="box"> <p> <input type="checkbox" id="c1" name="cb"> <label for="c1">Option 01</label> </p> <p> <input type="checkbox" id="c2" name="cb"> <label for="c2">Option 02</label> </p> <p> <input type="checkbox" id="c3" name="cb"> <label for="c3">Option 03</label> </p> </div> </div>
更时尚的用法:before和after
body{ font-family: sans-serif; } .container { margin-top: 50px; margin-left: 20px; margin-right: 20px; } .checkbox { width: 100%; margin: 15px auto; position: relative; display: block; } .checkbox input[type="checkbox"] { width: auto; opacity: 0.00000001; position: absolute; left: 0; margin-left: -20px; } .checkbox label { position: relative; } .checkbox label:before { content: ''; position: absolute; left: 0; top: 0; margin: 4px; width: 22px; height: 22px; transition: transform 0.28s ease; border-radius: 3px; border: 2px solid #7bbe72; } .checkbox label:after { content: ''; display: block; width: 10px; height: 5px; border-bottom: 2px solid #7bbe72; border-left: 2px solid #7bbe72; -webkit-transform: rotate(-45deg) scale(0); transform: rotate(-45deg) scale(0); transition: transform ease 0.25s; will-change: transform; position: absolute; top: 12px; left: 10px; } .checkbox input[type="checkbox"]:checked ~ label::before { color: #7bbe72; } .checkbox input[type="checkbox"]:checked ~ label::after { -webkit-transform: rotate(-45deg) scale(1); transform: rotate(-45deg) scale(1); } .checkbox label { min-height: 34px; display: block; padding-left: 40px; margin-bottom: 0; font-weight: normal; cursor: pointer; vertical-align: sub; } .checkbox label span { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .checkbox input[type="checkbox"]:focus + label::before { outline: 0; } <div class="container"> <div class="checkbox"> <input type="checkbox" id="checkbox" name="" value=""> <label for="checkbox"><span>Checkbox</span></label> </div> <div class="checkbox"> <input type="checkbox" id="checkbox2" name="" value=""> <label for="checkbox2"><span>Checkbox</span></label> </div> </div>
快速修复在文本前面添加图标:
< asp:CheckBox... Text="< img src='/link/to/img.png' />My Text" />
自定义复选框与CSS (WebKit浏览器解决方案仅Chrome, Safari,移动浏览器)
<input type="checkbox" id="cardAccptance" name="cardAccptance" value="Yes">
<label for="cardAccptance" class="bold"> Save Card for Future Use</label>
CSS:
/* The checkbox-cu */
.checkbox-cu {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 0;
cursor: pointer;
font-size: 16px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default checkbox-cu */
.checkbox-cu input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox-cu */
.checkmark {
position: absolute;
top: 4px;
left: 0;
height: 20px;
width: 20px;
background-color: #eee;
border: 1px solid #999;
border-radius: 0;
box-shadow: none;
}
/* On mouse-over, add a grey background color */
.checkbox-cu:hover input~.checkmark {
background-color: #ccc;
}
/* When the checkbox-cu is checked, add a blue background */
.checkbox-cu input:checked~.checkmark {
background-color: transparent;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the checkmark when checked */
.checkbox-cu input:checked~.checkmark:after {
display: block;
}
/* Style the checkmark/indicator */
.checkbox-cu .checkmark::after {
left: 7px;
top: 3px;
width: 6px;
height: 9px;
border: solid #28a745;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
z-index: 100;
}
我认为最简单的方法是通过样式化标签并使复选框不可见。
HTML
<input type="checkbox" id="first" />
<label for="first"> </label>
CSS
checkbox {
display: none;
}
checkbox + label {
/* Style for checkbox normal */
width: 16px;
height: 16px;
}
checkbox::checked + label,
label.checked {
/* Style for checkbox checked */
}
复选框,即使它是隐藏的,仍然是可访问的,它的值将在提交表单时发送。对于旧的浏览器,您可能必须使用JavaScript将标签的类更改为checked,因为我认为旧版本的Internet Explorer不理解复选框上的::checked。
开始之前(截至2015年1月)
最初的问题和答案现在已经有5年的历史了。因此,这是一个小小的更新。
首先,当涉及到样式化复选框时,有许多方法。基本宗旨是:
你需要隐藏默认的复选框控件,它是由你的浏览器设置的,并且不能使用CSS以任何有意义的方式覆盖。 在控件隐藏的情况下,您仍然需要能够检测并切换其已选中的状态。 复选框的选中状态需要通过样式化一个新元素来反映。
解决方案(原则上)
上面的任务可以通过许多方法来完成——您经常会听到使用CSS3伪元素是正确的方法。实际上,没有真正的正确或错误的方法,它取决于最适合您将在其中使用它的上下文的方法。也就是说,我有一个更喜欢的。
将复选框包装在标签元素中。这意味着即使它被隐藏,您仍然可以通过单击标签内的任何位置来切换其已检查状态。 隐藏你的复选框。 在复选框后添加一个新元素,您将相应地设置它的样式。它必须出现在复选框之后,以便使用CSS选择它,并根据:checked状态设置样式。CSS不能选择“向后”。
解决方案(代码形式)
label input { visibility: hidden;/* <-- Hide the default checkbox. The rest is to hide and allow tabbing, which display:none prevents */ display: block; height: 0; width: 0; position: absolute; overflow: hidden; } label span {/* <-- Style the artificial checkbox */ height: 10px; width: 10px; border: 1px solid grey; display: inline-block; } [type=checkbox]:checked + span {/* <-- Style its checked state */ background: black; } <label> <input type='checkbox'> <span></span> Checkbox label text </label>
细化(使用图标)
“但是嘿!”我听见你在喊。如果我想在盒子里画一个漂亮的勾号或叉号呢?而且我不想使用背景图片!
这就是CSS3的伪元素可以发挥作用的地方。它们支持content属性,该属性允许您注入表示任一状态的Unicode图标。或者,你也可以使用第三方字体图标源,如font awesome(但要确保你也设置了相关的字体家族,例如FontAwesome)
标签输入{ 显示:没有;/*隐藏默认复选框*/ } /*设置人工复选框*/ 标签跨度{ 高度:10 px; 宽度:10 px; 边框:1px纯灰色; 显示:inline-block; 位置:相对; } /*样式它的checked状态…带有标记图标*/ [type=checkbox]:已检查+ span:before { 内容:“2714 \”; 位置:绝对的; 上图:5 px; 左:0; } <标识> <输入类型=“复选框”> < span > < / span > 复选框标签文本 < / >标签