Wie kann ich HTML-Elemente mit CSS formatieren?

Styling Elemente mit CSS

Im Gegensatz zur Anpassung des Dropdowns mit JavaScript ist es nicht möglich, direkt zu formatieren. Elemente innerhalb eines Element, das aufgrund von Browser-Inkompatibilitäten nur CSS verwendet.

Browserübergreifende Kompatibilität

Für Browser wie IE9, Firefox und Chrome können die folgenden CSS-Eigenschaften teilweises Styling bereitstellen Optionen:

• -webkit-appearance: none; (WebKit-Browser)
• -moz-appearance: none; (Firefox)
• Aussehen: keine; (moderne Browser)

Diese Eigenschaften können den Standardstil des Dropdowns entfernen, eine weitere Anpassung ist jedoch begrenzt.

Alternative Lösung

Um ein ähnliches Erscheinungsbild zu erreichen, können Sie einen Workaround-Ansatz verwenden, indem Sie das

Element in ein benutzerdefiniertes Dropdown-Menü mithilfe von HTML und CSS:

1. Erstellen Sie ein
   Element zur Darstellung des Dropdowns.
2. Verwenden Sie HTML, um ein
   Element mit
   • Tags für die Dropdown-Optionen.
   • Verstecken Sie die
     Element verwendet zunächst display: none; CSS-Eigenschaft.
     • Wenn Sie mit der Maus über das
       Element, legen Sie display: block; fest, um das

       anzuzeigen. Element und fügen Sie Stile für Rahmen, Polsterung und Hintergrundfarbe hinzu.
       • Stilieren Sie das
       • Elemente innerhalb der
         mit Hover- und Aktivzuständen für interaktive Effekte.

Beispiel

<div>
  Select
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>

div { 
  margin: 10px;
  padding: 10px; 
  border: 2px solid purple; 
  width: 200px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
div > ul { display: none; }
div:hover > ul {display: block; background: #f9f9f9; border-top: 1px solid purple;}
div:hover > ul > li { padding: 5px; border-bottom: 1px solid #4f4f4f;}
div:hover > ul > li:hover { background: white;}
div:hover > ul > li:hover > a { color: red; }

Das obige ist der detaillierte Inhalt vonWie kann ich HTML-Elemente mit CSS formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!