So ändern Sie die Farbe des Optionsfelds mithilfe von CSS (Code im Anhang)

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

Mit dem oben genannten Verständnis können wir mit dem Codieren beginnen!

Hör auf, Unsinn und Code zu reden

Im Bild oben ist die linke Seite das native Radio Schaltfläche und auf der rechten Seite befindet sich unser benutzerdefiniertes Optionsfeld. Von oben nach unten sind die Stile

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;
}

HTML-Teil

<!-- 未选中状态 -->
<label>
  <input>
  <i></i>
</label>

<br>

<!-- 选中状态 -->
<label>
  <input>
  <i></i>
</label>

<br>

<!-- disabled状态 -->
<label>
  <input>
  <i></i>
</label>

JavaScript-Teil

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()
    }
  })
})

Bei dieser Implementierung sind drei Punkte zu beachten:

1 . Pass Das Label übergibt das Mausklickereignis an den zugehörigen Eingang[type=radio], sodass Sie das Optionsfeld sicher ausblenden und die eigenen Eigenschaften des Optionsfelds nutzen können. Aufgrund der Einschränkungen des Label-Steuerelements selbst ist es jedoch standardmäßig kein fokussierbares Element, sodass Tastaturtastenereignisse nicht auf das Optionsfeld übertragen werden können. Selbst wenn die Tabindex-Funktion hinzugefügt wird, ist für die Implementierung handschriftliches JS erforderlich it;

2. Wenn tabindex größer oder gleich 0 ist, bedeutet dies, dass das Element den Fokus erhalten kann. Wenn es 0 ist, bedeutet dies, dass die Reihenfolge des Fokussierens entsprechend der Position angeordnet ist das Element. Wenn es größer als 0 ist, bedeutet dies, dass der Fokus zuerst abgerufen wird wirken sich auf die Höhe des Linienfelds aus. Wenn es sich bei den Elementen im benutzerdefinierten Optionsfeld um Inline-Block-Elemente handelt und die Einstellung für die vertikale Ausrichtung etwas nachlässig ist, wird das Zeilenfeld, in dem sich das interne Element befindet, angehoben, wodurch sich die Höhe des Zeilenfelds ändert, in dem sich das benutzerdefinierte Optionsfeld befindet größer werden. Daher ist die Anzeige interner Elemente auf „Blockieren“ eingestellt, wodurch die vertikale Ausrichtung direkt deaktiviert und die Steuerbarkeit verbessert wird.

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;
}

HTML-Teil

<!-- 未选中状态 -->
<span>
  <span>
    <input>
    <i></i>
  </span>
</span>

<br>

<!-- 选中状态 -->
<span>
  <span>
    <input>
    <i></i>
  </span>
</span>

<br>

<!-- disabled状态 -->
<span>
  <span>
    <input>
    <i></i>
  </span>
</span>

JavaScript-Teil

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)
  })
})

Zusammenfassung

Wir können leichte Änderungen am Kontrollkästchen vornehmen. Das war's Dann kann es durch VUE, React und andere Frameworks leicht gekapselt werden, um eine einfachere API bereitzustellen, die bequemer zu verwenden ist.

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!