Der Inhalt dieses Artikels befasst sich mit der Implementierung der CSS-Methode zum Ändern der Farbe des Optionsfelds (mit Code). Ich hoffe, dass er für Sie hilfreich ist.
Wurden Sie jemals vom Verkäufer gefragt: „Können Sie die Farbe dieses Optionsfelds ändern? Passen Sie es an die Designfarbe an!“, und dann haben Sie unter der Tatsache gelitten, dass die native Farbe keine Änderung unterstützt die Farbe, und schließlich war man gezwungen, selbst eine zu behelfen. Wenn wir input[type=radio] aufgeben und ein neues entwickeln, stellen wir fest, dass es sehr umständlich ist, ausgewählte, nicht ausgewählte, nicht verfügbare und andere Zustände zu simulieren, und es ist sogar noch ärgerlicher, wenn es um Optionsfeldgruppen geht Sie können label, ::before, :checked und tabindex verwenden und dann durch Hinzufügen einer kleinen Menge JavaScript-Skripts ein „natives“ Optionsfeld mit einem umfassenderen Stil simulieren. Lass es uns gemeinsam versuchen!
Erfahren Sie mehr über das Optionsfeld
Da es unser Ziel ist, die Farbe des Optionsfelds und andere Darstellungsmerkmale und Verhaltensweisen so zu ändern, dass sie mit dem ursprünglichen Optionsfeld übereinstimmen, Dann müssen wir zunächst die ursprünglichen Erscheinungsmerkmale und Verhaltensweisen des Optionsfelds verstehen.
1. Aussehensmerkmale
1.1. Normaler Stil
margin: 3px 3px 0px 5px; border: none 0; padding: 0; box-sizing: border-box; display: inline-block; line-height: normal; position: static;
Hinweis: Wir müssen sicherstellen, dass die Layouteigenschaften mit dem ursprünglichen Aussehen übereinstimmen, andernfalls besteht eine hohe Wahrscheinlichkeit, dass der Ersatz durch ein kundenspezifisches Radio erfolgt Die Schaltfläche wirkt sich aus Das Gesamtlayout führte schließlich dazu, dass die Layouteigenschaften anderer Elemente angepasst werden mussten, um eine Gesamtkoordination zu erreichen, wodurch der Umfang der Änderungen erweitert wurde.
1.2. Stile, die den Fokus erhalten
outline-offset: 0px; outline: -webkit-focu-ring-color auto 5px;
Hinweis: Der Stil, der hier den Fokus erhält, wird nur über die Tabulatortaste auf der Tastatur wirksam, obwohl das Optionsfeld aktiviert ist Wenn Sie den Fokus gewinnen, wird der obige Stil nicht wirksam.
1.3. Auf deaktivierten Stil einstellen
color: rgb(84, 84, 84);
2. Die Verhaltensmerkmale des Optionsfelds sind offensichtlich ausgewählt und das Änderungsereignis des ausgewählten Status
Ereignisse müssen extern verfügbar bleiben. change Es ist auch erwähnenswert, dass, wenn das Optionsfeld mit der Taste
auf der Tastatur fokussiert wird, durch Drücken der Taste Tab das Optionsfeld ausgewählt wird. Space
Hör auf, Unsinn und Code zu reden
nicht ausgewählt, ausgewählt, fokussiert und deaktiviert.
CSS-Teil
label.radio {
/* 保证布局特性保持一致 */
margin: 3px 3px 0px 5px;
display: inline-block;
box-sizing: border-box;
width: 12px;
height: 12px;
}
.radio__appearance{
display: block; /* 设置为block则不受vertical-align影响，从而不会意外影响到.radio的linebox高度 */
position: relative;
box-shadow: 0 0 0 1px tomato; /* box-shadow不像border那样会影响盒子的框高 */
border-radius: 50%;
height: 90%;
width: 90%;
text-align: center;
}
label.radio [type=radio] + .radio__appearance::before{
content: "";
display: block;
border-radius: 50%;
width: 85%;
height: 85%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: background .3s;
}
label.radio [type=radio]:checked + .radio__appearance::before{
background: tomato;
}
label.radio [type=radio][disabled] + .radio__appearance{
opacity: .5;
}
label.radio:focus{
outline-offset: 0px;
outline: #999 auto 5px;
}
/* 通过鼠标单击获得焦点时，outline效果不生效 */
label.radio.clicked{
outline: none 0;
}
/* 自定义单选框的行为主要是基于原生单选框的，因此先将原生单选框隐藏 */
label.radio input {
display: none;
}<!-- 未选中状态 --> <label> <input> <i></i> </label> <br> <!-- 选中状态 --> <label> <input> <i></i> </label> <br> <!-- disabled状态 --> <label> <input> <i></i> </label>
var radios = document.querySelectorAll(".radio")
radios.forEach(radio => {
// 模拟鼠标点击后:focus样式无效
radio.addEventListener("mousedown", e => {
var tar = e.currentTarget
tar.classList.add("clicked")
var fp = setInterval(function(){
if (document.activeElement != tar){
tar.classList.remove("clicked")
clearInterval(fp)
}
}, 400)
})
// 模拟通过键盘获得焦点后，按`Space`键执行选中操作
radio.addEventListener("keydown", e => {
if (e.keyCode === 32){
e.target.click()
}
})
})Erreicht durch opacity:0
Oben verknüpfen wir die Eingabe[type=radio] von display:none mit der Beschriftung, um die benutzerdefinierte Reihenfolge mithilfe von input[type=radio] zu vereinfachen Implementierung des Auswahlfelds, erfordert aber immer noch handschriftliches JS, um die Verhaltensmerkmale des Drückens der Leertaste zum Auswählen zu implementieren. Gibt es eine andere Möglichkeit, Ärger zu sparen? Wir möchten nur, dass Benutzer das native Optionsfeld nicht sehen. Können wir es also einfach auf opacity:0 setzen? !
CSS-Teil.radio {
/* 保证布局特性保持一致 */
margin: 3px 3px 0px 5px;
display: inline-block;
box-sizing: border-box;
width: 13px;
height: 13px;
}
/* 自定义单选框的行为主要是基于原生单选框的，因此先将原生单选框透明，且沾满整个父元素 */
.radio input {
opacity: 0;
position: absolute;
z-index: 1; /* 必须覆盖在.radio__appearance上才能响应鼠标事件 */
width: 100%;
height: 100%;
}
.radio__container-box{
position: relative;
width: 100%;
height: 100%;
}
.radio__appearance{
display: block; /* 设置为block则不受vertical-align影响，从而不会意外影响到.radio的linebox高度 */
position: relative;
box-shadow: 0 0 0 1px tomato; /* box-shadow不像border那样会影响盒子的框高 */
border-radius: 50%;
height: 90%;
width: 90%;
text-align: center;
}
.radio [type=radio] + .radio__appearance::before{
content: "";
display: block;
border-radius: 50%;
width: 85%;
height: 85%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: background .3s;
}
.radio [type=radio]:checked + .radio__appearance::before{
background: tomato;
}
.radio [type=radio][disabled] + .radio__appearance{
opacity: .5;
}
.radio:focus-within .radio__appearance{
outline-offset: 0px;
outline: #999 auto 5px;
}
/* 通过鼠标单击获得焦点时，outline效果不生效 */
.radio.clicked .radio_appearance{
outline: none 0;
}<!-- 未选中状态 --> <span> <span> <input> <i></i> </span> </span> <br> <!-- 选中状态 --> <span> <span> <input> <i></i> </span> </span> <br> <!-- disabled状态 --> <span> <span> <input> <i></i> </span> </span>
var radios = document.querySelectorAll(".radio")
radios.forEach(radio => {
// 模拟鼠标点击后:focus样式无效
radio.addEventListener("mousedown", e => {
var tar = e.currentTarget
tar.classList.add("clicked")
var fp = setInterval(function(){
if (!tar.contains(document.activeElement){
tar.classList.remove("clicked")
clearInterval(fp)
}
}, 400)
})
})Das obige ist der detaillierte Inhalt vonSo ändern Sie die Farbe des Optionsfelds mithilfe von CSS (Code im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
