我试图使用以下样式的复选框:
<输入类型=“checkbox”样式=“border:2px点数:00f;显示:block;背景:ff0000;”/>
但是没有应用样式。复选框仍然显示其默认样式。我如何给它指定的样式?
我试图使用以下样式的复选框:
<输入类型=“checkbox”样式=“border:2px点数:00f;显示:block;背景:ff0000;”/>
但是没有应用样式。复选框仍然显示其默认样式。我如何给它指定的样式?
当前回答
自定义复选框与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;
}
其他回答
有一种方法可以使用CSS来做到这一点。我们可以(ab)使用label元素并样式化该元素。需要注意的是,这将不适用于Internet Explorer 8及更低版本。
.myCheckbox输入{ 位置:相对; z - index: -9999; } .myCheckbox span { 宽度:20 px; 高度:20 px; 显示:块; 背景:url(“link_to_image”); } .myCheckbox输入:checked + span { 背景:url(“link_to_another_image”); } <label for="test">我的样式化的"复选框"的标签</label> <标签类= " myCheckbox " > <input type="checkbox" name="test" /> < span > < / span > < / >标签
由于像Edge和Firefox这样的浏览器不支持:before:after on复选框输入标签,这里有一个纯HTML和CSS的替代方案。当然,您应该根据您的要求编辑CSS。
让复选框的HTML像这样:
<div class='custom-checkbox'>
<input type='checkbox' />
<label>
<span></span>
Checkbox label
</label>
</div>
为复选框应用此样式可更改颜色标签
<style>
.custom-checkbox {
position: relative;
}
.custom-checkbox input{
position: absolute;
left: 0;
top: 0;
height:15px;
width: 50px; /* Expand the checkbox so that it covers */
z-index : 1; /* the label and span, increase z-index to bring it over */
opacity: 0; /* the label and set opacity to 0 to hide it. */
}
.custom-checkbox input+label {
position: relative;
left: 0;
top: 0;
padding-left: 25px;
color: black;
}
.custom-checkbox input+label span {
position: absolute; /* a small box to display as checkbox */
left: 0;
top: 0;
height: 15px;
width: 15px;
border-radius: 2px;
border: 1px solid black;
background-color: white;
}
.custom-checkbox input:checked+label { /* change label color when checked */
color: orange;
}
.custom-checkbox input:checked+label span{ /* change span box color when checked */
background-color: orange;
border: 1px solid orange;
}
</style>
这是一个现代版本,有一点动画,和简单的样式,你可以自定义:
.checkbox {
position: relative;
width: 20px;
height: 20px;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
background: transparent;
border: 2px solid #7C7A7D;
border-radius: 5px;
margin: 0;
outline: none;
transition: 0.5s ease;
opacity: 0.8;
cursor: pointer;
}
.checkbox:checked {
border-color: #7C7A7D;
background-color: #7C7A7D;
}
.checkbox:checked:before {
position: absolute;
left: 2px;
top: -4px;
display: block;
content: '\2713';
text-align: center;
color: #FFF;
font-family: Arial;
font-size: 14px;
font-weight: 800;
}
.checkbox:hover {
opacity: 1.0;
transform: scale(1.05);
}
使用纯CSS修改复选框样式。这不需要任何JavaScript或HTML操作:
.form input[type="checkbox"]:before { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; content: "\f096"; opacity: 1 !important; margin-top: -25px; appearance: none; background: #fff; } .form input[type="checkbox"]:checked:before { content: "\f046"; } .form input[type="checkbox"] { font-size: 22px; appearance: none; -webkit-appearance: none; -moz-appearance: none; } <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> <form class="form"> <input type="checkbox" /> </form>
从我的谷歌,这是最简单的方法复选框样式。只需根据您的设计添加:after和:checked:after CSS。
body{ background: #DDD; } span{ margin-left: 30px; } input[type=checkbox] { cursor: pointer; font-size: 17px; visibility: hidden; position: absolute; top: 0; left: 0; transform: scale(1.5); } input[type=checkbox]:after { content: " "; background-color: #fff; display: inline-block; color: #00BFF0; width: 14px; height: 19px; visibility: visible; border: 1px solid #FFF; padding: 0 3px; margin: 2px 0; border-radius: 8px; box-shadow: 0 0 15px 0 rgba(0,0,0,0.08), 0 0 2px 0 rgba(0,0,0,0.16); } input[type=checkbox]:checked:after { content: "\2714"; display: unset; font-weight: bold; } <input type="checkbox"> <span>Select Text</span>