我正在做一個專案，我需要復選框的背景為黃色，勾號的顏色為白色。
<div class="radio-btn">
<input type="checkbox" name="disclaimer" id="rad-1" required="" />
<label for="rad-1">Yes, please!</label>
</div>
這是我的 HTML，它的樣式寫在下面
#rad-1 {
height: 20px;
width: 20px;
accent-color: yellow;
}
背景變成黃色但刻度線的顏色變成黑色我試過“顏色：白色；” 和“背景顏色：白色；” 但這些都不起作用，刻度線保持黑色。
這是它的外觀
uj5u.com熱心網友回復：
我給你一個可能的例子：How TO - Custom Checkbox
首先我們隱藏瀏覽器的默認單選按鈕
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
現在我們創建一個自定義單選按鈕
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
}
完整示例
body {
background-color: grey;
}
/* The container */
.container {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
color: white;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide the browser's default radio button */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.container:hover input~.checkmark {
background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.container input:checked~.checkmark {
background-color: yellow;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.container input:checked~.checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.container .checkmark:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}<h1>Custom Radio Buttons</h1>
<label class="container">One
<input type="radio" checked="checked" name="radio">
<span class="checkmark"></span>
</label>
<label class="container">Two
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
<label class="container">Three
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>
<label class="container">Four
<input type="radio" name="radio">
<span class="checkmark"></span>
</label>uj5u.com熱心網友回復：
沒有有效的方法（就我現在而言），但是有一些收費，如https://doodlenerd.com/html-control/css-checkbox-generator來生成自定義復選框，您可以在其中編輯很多東西。
它們與自定義指標一起使用，當您使用標簽單擊它們時，這些指標會被激活。
uj5u.com熱心網友回復：
我不得不對復選框應用一些樣式并面臨許多挑戰。下面的鏈接對我有幫助，請看一下。
如何使用 CSS 設定復選框的樣式
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/447920.html
上一篇：如何正確在文本區域上放置按鈕？
下一篇：浮動右改變下一個元素的位置