CSS: SelectBox stylen

edit | delete

Autor: Ralf v.d.Mark

eingetragen: Sonntag, 04. Februar 2024 um 20:00 Uhr (5/2024 Kalenderwoche)

geändert: Sonntag, 04. Februar 2024 um 20:02 Uhr (5/2024 Kalenderwoche)

Keywords: SelectBox css styling stylen

Kategorien: CSS, HTML,

Text:

Um eine Selectbox / Auswahlbox zu stylen kann man untenstehenden Quellcode benutzen.



siehe auch Selectbox: Techdox-Artikel 36

Quellcode:   

<style>
    .formMitSelectbox {
        display: inline;
    }
    .formMitSelectbox select {
        border: 1px outset #26569E;
        -moz-padding-start: calc(10px - 3px);
        height: 23px;
        padding-left: 10px;
        color: #26569E;
        font-family: 'Open Sans', sans-serif;
        font-size: 16px;
        font-weight: bold;
        border-radius: 11px;
        box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.3);
        outline: none;
        cursor: pointer;
    }
    .formMitSelectbox select option {
        color: #666;
    }
    .formMitSelectbox select:focus::-ms-value {
        background-color: transparent;
    }
    .formMitSelectbox button {
        border: 1px outset #26569E;
        border-radius: 11px;
        height: 23px;
        box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.3);
        cursor: pointer;
    }
</style>

<form action="" id="formMonatsAuswahl" method="get">
    <button type="button" title="Einen Monat zurück blättern"
            >&#129184;&#xFE0F; &#10134;&#xFE0F;</button>
    <select name="monatsAuswahlbox">
        <option>Auswahl 1</option>
        <option selected>Auswahl 2</option>
        <option>Auswahl 3</option>
        <option>Auswahl 2</option>
    </select>
    <button type="button" title="Einen Monat weiter blättern"
            >&#10133;&#xFE0F; &#129185;&#xFE0F;</button>
</form>