Hallo,
ich bin blutiger CSS- und HTML-Anfänger und auch neu im Forum, hoffe also, dass ich bei der Suchfunktion nicht doch ein Thema übersehen habe und keine allzu dummen Fragen stelle.
Ich möchte eine Auswahlliste erstellen, bei der in einem Droddown-Menü der passende Wert ausgewählt werden kann. Diese konnte ich soweit auch erstellen und schon teilweise stylen, allerdings habe ich noch ein paar Probleme.
Meinen Code findet ihr etwas weiter unten, das Bild select_triangle.svg ist einfach ein normales Dreieck zur Kennzeichnung des Dropdowns.
Meine Fragen:
Wie kann ich das Dreieck etwas weiter nach rechts verschieben, also den Abstand zwischen Dreieck und rechter Grenze verringern?
Wie kann der Text rechtsbündig angezeigt werden? Text-align hat irgendwie nicht funktioniert?
Welche weiteren CSS-Styling-Möglichkeiten gibt es für die Auswahlliste? Kennt ihr irgendwelche Links, wo diese Möglichkeiten zusammengefasst sind? Besonders stört mich da das Styling der Scrolleiste, welche nach Klick auf das Dreieck rechts angezeigt wird.
Mein HTML-Code:
CSS:
Vielen Dank schonmal für eure Antworten!
ich bin blutiger CSS- und HTML-Anfänger und auch neu im Forum, hoffe also, dass ich bei der Suchfunktion nicht doch ein Thema übersehen habe und keine allzu dummen Fragen stelle.
Ich möchte eine Auswahlliste erstellen, bei der in einem Droddown-Menü der passende Wert ausgewählt werden kann. Diese konnte ich soweit auch erstellen und schon teilweise stylen, allerdings habe ich noch ein paar Probleme.
Meinen Code findet ihr etwas weiter unten, das Bild select_triangle.svg ist einfach ein normales Dreieck zur Kennzeichnung des Dropdowns.
Meine Fragen:
Wie kann ich das Dreieck etwas weiter nach rechts verschieben, also den Abstand zwischen Dreieck und rechter Grenze verringern?
Wie kann der Text rechtsbündig angezeigt werden? Text-align hat irgendwie nicht funktioniert?
Welche weiteren CSS-Styling-Möglichkeiten gibt es für die Auswahlliste? Kennt ihr irgendwelche Links, wo diese Möglichkeiten zusammengefasst sind? Besonders stört mich da das Styling der Scrolleiste, welche nach Klick auf das Dreieck rechts angezeigt wird.
Mein HTML-Code:
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link type="text/css" rel="stylesheet" href="index_forum.css">
</head>
<body>
<nav>
<li>
<select name="language" size="1">
<option>Deutsch</option>
<option>English</option>
<option>Español</option>
<option>François</option>
<option>Bahasa Indonesia</option>
<option>Bahasa Melayu</option>
<option>Català</option>
<option>Dansk</option>
<option>Eλληνικά</option>
<option>Italiano</option>
<option>Magyar</option>
<option>Nederlands</option>
<option>Norsk</option>
<option>Polski</option>
<option>Português</option>
<option>Suomi</option>
<option>Svenska</option>
<option>Türkçe</option>
<option>Íslenska</option>
<option>Čeština</option>
<option>Русский</option>
<option>ภาษาไทย</option>
<option>中文 (简体)</option>
<option>中文 (繁體)</option>
<option>日本語</option>
<option>한국어</option>
</select>
</li>
</nav>
</body>
</html>CSS:
Code:
html, body, div {
margin: 0;
padding: 0;
font-size: 1.2vw;
font-family: Arial, sans-serif;
}
nav {
text-align: right;
padding-top: 2.5%;
}
li {
display: inline;
padding: 0.2% 2.5% 0.3% 2.5%;
background-color: #ea5400;
text-align: center;
border-style: solid solid solid none;
border-radius: 1em;
border-width: 0.15em;
margin-right: 2%;
}
select {
width: 14%;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border:none;
border-radius: 0;
font-size: 1em;
font-family: Arial, sans-serif;
background-color: #ea5400;
background-image: url(select_triangle.svg);
background-position: right;
background-repeat: no-repeat;
background-size: 8%;
padding-right: 0.1%;
text-align: right;
}
option {
text-align: right;
}Vielen Dank schonmal für eure Antworten!
