Einführung in die Verwendung von CSS zum Ändern des Standardstils des Dropdown-Listenauswahlfelds

Dieser Artikel verwendet CSS, um den Standardstil der Dropdown-Liste zu ändernAuswahlfeld

Prinzip

Das Prinzip besteht darin, das Standard-Dropdown-Menü des Browsers zu löschen. Down-Box-Stil und wenden Sie ihn dann an. Laden Sie Ihren eigenen hoch und hängen Sie ein Bild eines kleinen Pfeils an, der nach rechts ausgerichtet ist. Natürlich kann der kleine Pfeil rechts durch Pseudoelemente davor oder danach implementiert werden.

select {  /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
  border: solid 1px #000;  /*将默认的select选择框样式清除*/
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;  /*在选择框的最右侧中间显示小箭头图片*/
  background: url("arrow.png") no-repeat right center;
  padding-right: 14px;
}/*清除ie的默认选择框样式清除，隐藏下拉箭头*/select::-ms-expand { display: none; }

Kompatibilitätsprobleme

IE8/9 unterstützt kein Aussehen: keine CSSAttribut. Wenn wir also mit niedrigeren Versionen des IE-Browsers kompatibel sein müssen, müssen wir dafür einen übergeordneten Container hinzufügen. Der Container wird verwendet, um den kleinen Pfeil abzudecken Fügen Sie dann ein Recht zum Auswählen hinzu. Der kleine Versatz oder die Breite ist größer als das übergeordnete Element. Setzen Sie die CSS-Eigenschaft des übergeordneten Elements auf unsichtbar über den Bereich hinaus, um den kleinen Pfeil abzudecken. Fügen Sie dann dem übergeordneten Container ein Hintergrundbild oder Pseudoelement hinzu, um einen benutzerdefinierten Pfeil zu implementieren.

HTML-Code:

<div id="parentDiv">
  <select>
      <option>a</option>
      <option>b</option>
      <option>c</option>
  </select></div>

CSS-Code:

#parentDiv {
    background: url('ico.png') no-repeat right center;
    width: 80px;
    height: 34px;
    overflow: hidden;
}#parentDiv select {
    background: transparent;
    border: none;
    padding-left: 10px;
    width: 100px;
    height: 100%;
}

Fehler

Die Breite der Dropdown-Option ist breiter als sie Übergeordneter Container, siehe Es scheint etwas unkoordiniert zu sein, es hängt von Ihrer eigenen Wahl und der Kompatibilität des Projekts ab.

Das obige ist der detaillierte Inhalt vonEinführung in die Verwendung von CSS zum Ändern des Standardstils des Dropdown-Listenauswahlfelds. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!