Option auswählen Rand rechts funktioniert nicht

Question

Ich möchte einen Rand rechts zwischen der Symbolschriftart und den Optionselementen. Es ist möglich, dies mit Leerzeichen zu tun, aber ich mag dies wie unten auf der Option Elemente mit einem margin-right tun:

select 
{ 
    padding: 10px; 
    width: 100%; 
} 

select{ 
    border: 0; 
    appearance: none; 
    -moz-appearance: none; 
    -webkit-appearance: none; 
    cursor: pointer; 
} 

.select_category, 
{ 
    position: relative; 
} 

.select_category{ 
    border-left: 2px solid red; 
    border-top: 2px solid red; 
    border-bottom: 2px solid red; 
} 


.select_category:before { 
    content: "\f0ca"; 
    font-family: 'FontAwesome'; 
    position: absolute; 
    left: 0; 
    font-size: 1em; 
    z-index: 1; 
    color: green; 
    padding: 15px 18px; 

} 

.select_category option{ 
    margin-right:10px; 
} 

Aber es funktioniert nicht. Weißt du, warum?

Beispiel: https://jsfiddle.net/8bnu45u2/1/

Answer 1

Sie sollten eine padding-left auf .select verwenden. Das Element .select_category:before (das das Menüsymbol enthält) hat eine absolute Position, daher wirkt sich ein Rand dafür nicht auf die Position anderer Elemente aus.

https://jsfiddle.net/83Lj0kw6/1/

Answer 2

Sie können die Eltern machen flex alles in einer Reihe zu setzen und dann werden Ihre Margen arbeiten. Entfernen Sie die absolute Positionierung auf den Pseudoelementen, und legen Sie die select zu flex-grow: 1 fest so verbraucht es den verfügbaren Speicherplatz. Entfernen Sie das vertikale Padding für die Pseudoelemente, wenn der Container dadurch zu groß wird.

select { 
 
    padding: 10px; 
 
    flex-grow: 1; 
 
} 
 

 
select { 
 
    border: 0; 
 
    appearance: none; 
 
    -moz-appearance: none; 
 
    -webkit-appearance: none; 
 
    cursor: pointer; 
 
} 
 

 
.select_category { 
 
    position: relative; 
 
} 
 

 
.select_category { 
 
    border-left: 2px solid red; 
 
    border-top: 2px solid red; 
 
    border-bottom: 2px solid red; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.select_category:before { 
 
    content: "\f0ca"; 
 
    font-family: 'FontAwesome'; 
 
    font-size: 1em; 
 
    z-index: 1; 
 
    color: green; 
 
    padding: 15px 18px; 
 
} 
 

 
.select_category:after { 
 
    content: "\F0D7"; 
 
    font-family: 'FontAwesome'; 
 
    color: #d2d6df !important; 
 
    font-size: 2em; 
 
    z-index: 1; 
 
    color: #00af87; 
 
    padding: 15px 18px; 
 
}

<div class="select_category"> 
 
    <select> 
 
    <option selected>Items</option> 
 
    <option value="1">One</option> 
 
    <option value="2">Two</option> 
 
    <option value="3">Three</option> 
 
    </select> 
 
</div>