任何人都可以告诉我如何更改默认样式:
<input type=checkbox...>
所以它将使用我的2样式图片而不是默认样式??
TNX !!
答案 0 :(得分:1)
试试这个。您可以先删除默认样式来替换默认的radio / checkbox,然后应用片段中显示的伪元素。
PS:为此,请使用font-awesome library
.checkbox-custom, .radio-custom {
opacity: 0;
position: absolute;
}
.checkbox-custom, .checkbox-custom-label, .radio-custom, .radio-custom-label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
}
.checkbox-custom-label, .radio-custom-label {
position: relative;
}
.checkbox-custom + .checkbox-custom-label:before, .radio-custom + .radio-custom-label:before {
content: '';
background: #fff;
border: 2px solid #ddd;
display: inline-block;
vertical-align: middle;
width: 20px;
height: 20px;
padding: 2px;
margin-right: 10px;
text-align: center;
}
.checkbox-custom:checked + .checkbox-custom-label:before {
content: "\f00c";
font-family: 'FontAwesome';
background: rebeccapurple;
color: #fff;
}
.radio-custom + .radio-custom-label:before {
border-radius: 50%;
}
.radio-custom:checked + .radio-custom-label:before {
content: "\f00c";
font-family: 'FontAwesome';
color: #bbb;
}
.checkbox-custom:focus + .checkbox-custom-label, .radio-custom:focus + .radio-custom-label {
outline: 1px solid #ddd; /* focus style */
}
&#13;
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
HTML CSS Result
Edit on
<form>
<h2>CSS Radio Buttons and checkboxes: Border</h2>
<h5>Checkboxes and radio buttons with a border checked state: Pure CSS</h5>
<p><em>Uses an inset box shadow for the bordered effect on the checked state.</em></p>
<br>
<h2>Radio Buttons</h2>
<div>
<input id="radio-1" class="radio-custom" name="radio-group" type="radio" checked>
<label for="radio-1" class="radio-custom-label">First Choice</label>
</div>
<div>
<input id="radio-2" class="radio-custom"name="radio-group" type="radio">
<label for="radio-2" class="radio-custom-label">Second Choice</label>
</div>
<div>
<input id="radio-3" class="radio-custom" name="radio-group" type="radio">
<label for="radio-3" class="radio-custom-label">Third Choice</label>
</div>
<h2>Checkboxes</h2>
<div>
<input id="checkbox-1" class="checkbox-custom" name="checkbox-1" type="checkbox" checked>
<label for="checkbox-1" class="checkbox-custom-label">First Choice</label>
</div>
<div>
<input id="checkbox-2" class="checkbox-custom" name="checkbox-2" type="checkbox">
<label for="checkbox-2" class="checkbox-custom-label">Second Choice</label>
</div>
<div>
<input id="checkbox-3" class="checkbox-custom" name="checkbox-3" type="checkbox">
<label for="checkbox-3"class="checkbox-custom-label">Third Choice</label>
</div>
</div>
</form>
&#13;
答案 1 :(得分:1)
您应该使用css更改checkbox
旁边的元素。
在这个例子中,它是背景颜色。只需将其替换为您的图像。
例如:https://css-tricks.com/the-checkbox-hack/
input[type=checkbox] {
visibility: hidden;
/* For mobile, it's typically better to position checkbox on top of clickable
area and turn opacity to 0 instead. */
}
/* Default State */
label {
background: green;
width: 400px;
height: 100px;
line-height: 100px;
color: white;
text-align: center;
}
/* Toggled State */
input[type=checkbox]:checked ~ label {
background: red;
}
<input type="checkbox" id="toggle-1">
<label for="toggle-1">Do Something</label>