在选择器内对齐文本

Question

我创建了一个选择器作为组件：

<my-selector
    ...
</my-selector>

这是它的css文件：

my-selector{
    select {
        -webkit-appearance: none !important;
        -moz-appearance: none;
        padding: .5em;
        background: #fff;
        border: 1px solid #ccc;
        border-radius: 2px;
        padding: 3px 26px;
    }
    .select-container {
        position:relative; 
        display: inline;
        margin-right: 10px;
    }
    .select-container:after {
        content:"";  
        position:absolute; 
        pointer-events: none;
    }
    .select-container:after {
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        top: .5em;
        right: .75em;
        border-top: 5px solid black;
    }
    select::-ms-expand {
        display: none;
    }
}

我遇到的问题是单词与左边界之间的距离。我尝试过左边距，填充和其他方法，以删除它或使其变小但没有成功。

有什么建议吗？

Answer 1

您通过css为选择器添加了填充：

select {
    -webkit-appearance: none !important;
    -moz-appearance: none;
    padding: .5em;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 2px;
    padding: 3px 26px; /* this is the problem, and it's overwriting the padding attribute 4 lines up */
}

您需要删除第一次出现的填充，然后将填充设置为类似以下内容：

padding: 3px 26px 3px 5px; /* top right bottom left */