如何使用 CSS 自定義復選框外觀
[英]How to customize the checkbox appearance with CSS
問題描述
我想自定義它，以便單擊時復選框顏色應更改。 請參考鏈接和圖片，並建議如何實現這一點，因為我不知道該怎么做。
下面是復選框的 HTML 代碼：
<div id="container">
<div id="btnOuterDIV">
<div id="btnChkbox">
<input type="checkbox" id="btnCB" />
</div>
</div>
</div>
復選框的 CSS，它應該看起來像圖像中的那個：
#container {
padding:50px;
}
#btnOuterDIV {
height:30px;
width:80px;
border:1px solid #ccc;
border-radius:5px;
}
#btnOuterDIV:hover {
border-color:#888;
}
#btnChkbox {
height:15px;
width:15px;
padding-top:5px;
padding-left:5px;
}
5 個解決方案
解決方案1
2 2016-08-27 10:33:04
您必須制作一個<label>並為其設置樣式。
<input type="checkbox" id="cb">
<label for="cb" class="checkbox"></label>
在 CSS 中，有:checked ，你可以這樣使用它：
#cb:checked + .checkbox {
/* style here */
}
解決方案2
1 2016-08-27 12:00:11
[type="checkbox"]:not(:checked), [type="checkbox"]:checked { position: absolute; left: -9999px; } [type="checkbox"]:not(:checked) + label, [type="checkbox"]:checked + label { position: relative; padding-left: 25px; cursor: pointer; } /* checkbox aspect */ [type="checkbox"]:not(:checked) + label:before, [type="checkbox"]:checked + label:before { content: ''; position: absolute; left:0; top: 2px; width: 17px; height: 17px; border: 1px solid #aaa; background: #f8f8f8; border-radius: 3px; box-shadow: inset 0 1px 3px rgba(0,0,0,.3) } /* checked mark aspect */ [type="checkbox"]:not(:checked) + label:after, [type="checkbox"]:checked + label:after { content: '✔'; position: absolute; top: 3px; left: 4px; font-size: 18px; line-height: 0.8; color: #09ad7e; transition: all .2s; } [type="checkbox"]:not(:checked) + label:after { opacity: 0; transform: scale(0); } body { font-family: "Open sans", "Segoe UI", "Segoe WP", Helvetica, Arial, sans-serif; color: #777; } h1 { margin-bottom: 5px; font-weight: normal; text-align: center; } form { width: 80px; margin: 0 auto; }
<h1>Custom checkboxes with CSS</h1> <form action="#"> <p> <input type="checkbox" id="test1" /> <label for="test1">Red</label> </p> </form>
解決方案3
1 2016-09-07 14:21:36
<h1>Custom checkboxes with CSS</h1>
<form action="#">
<p>
<input type="checkbox" id="test1" />
<label for="test1">Red</label>
</p>
</form>
------CSS--------
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
position: absolute;
left: -9999px;
}
[type="checkbox"]:not(:checked) + label,
[type="checkbox"]:checked + label {
position: relative;
padding-left: 25px;
cursor: pointer;
}
/* checkbox aspect */
[type="checkbox"]:not(:checked) + label:before,
[type="checkbox"]:checked + label:before {
content: '';
position: absolute;
left: 0;
top: 2px;
width: 17px;
height: 17px;
border: 1px solid #aaa;
background: #f8f8f8;
border-radius: 3px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, .3)
}
/* checked mark aspect */
[type="checkbox"]:not(:checked) + label:after,
[type="checkbox"]:checked + label:after {
content: '✔';
position: absolute;
top: 3px;
left: 4px;
font-size: 18px;
line-height: 0.8;
color: white;
background-color:#FF3336;
transition: all .2s;
}
[type="checkbox"]:not(:checked) + label:after {
opacity: 0;
transform: scale(0);
}
body {
font-family: "Open sans", "Segoe UI", "Segoe WP", Helvetica, Arial, sans-serif;
color: #777;
background-color:#4CFF33;
}
h1 {
margin-bottom: 5px;
font-weight: normal;
text-align: center;
}
form {
width: 80px;
margin: 0 auto;
}
解決方案4
0 2020-12-20 17:04:16
<!DOCTYPE html>
<html>
<head>
<title>Custom checkbox</title>
</head>
<style>
input[type="checkbox"] {
visibility: hidden;
}
label {
cursor: pointer;
}
input[type="checkbox"] + label:before {
border: 1px solid #ff0000;
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: #00ff00;
color: #ff0000;
content: "\2713";
text-align: center;
}
</style>
<body>
<p>
<input type="checkbox" id="checkbox1" name="CheckOption">
<label for="checkbox1">Check1</label>
</p>
<p>
<input type="checkbox" id="checkbox2" name="CheckOption">
<label for="checkbox2">Check2</label>
</p>
<p>
<input type="checkbox" id="checkbox3" name="CheckOption">
<label for="checkbox3">Check3</label>
</p>
</body>
</html>
解決方案5
0 2020-12-20 17:08:04
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<style>
.checkbox {
display: inline-flex;
cursor: pointer;
position: relative;
}
.checkbox > span {
color: #34495E;
padding: 0.5rem 0.25rem;
}
.checkbox > input {
height: 25px;
width: 25px;
-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
appearance: none;
border: 1px solid #34495E;
border-radius: 4px;
outline: none;
transition-duration: 0.3s;
background-color: #41B883;
cursor: pointer;
}
.checkbox > input:checked {
border: 1px solid #41B883;
background-color: #34495E;
}
.checkbox > input:checked + span::before {
content: '\2713';
display: block;
text-align: center;
color: #41B883;
position: absolute;
left: 0.7rem;
top: 0.2rem;
}
.checkbox > input:active {
border: 2px solid #34495E;
}
</style>
<body>
<label class="checkbox">
<input type="checkbox" />
<span>Check Me</span>
</label>
</body>
</html>
如何基於：checked更改復選框的外觀，而沒有其他元素
[英]How to change appearance of checkbox based on :checked, with no additional elements
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.