html - 样式选择文本溢出

Question

试图找出样式选择框的问题。它被包裹在一个带有背景的 div 中，以创建一个蒙版外观。

当输入中的文本过多时，它会溢出到按钮中。

HTML:

<div class="styled-select">
    <select  class="form-control required" name="address" disabled>
        <option style="" value="">Please Select Address</option>
    </select>
</div>

CSS:

    .styled-select select {
    font-family: "Circular", Helvetica, Arial, sans-serif;
    font-size: 18px;
    background: transparent;
    width: 100%;
    padding: 15px;
    font-size: 16px;
    line-height: 1;
    border: 0;
    height: 50px;
    border-radius: 10px;
    -webkit-appearance: none;
    padding-right: 10%;
}

.styled-select { 
    width: 100%; 
    overflow: hidden; 
    background: url(../images/bg/down-arrow.jpg) no-repeat right #FFF; 
    background-size: 60px; 
    height: 50px; 
    border-radius: 10px; 
}

@media (min-width: 768px) {
    .styled-select select {
    font-family: "Circular", Helvetica, Arial, sans-serif;
    font-size: 18px;
    background: transparent;
    width: 100%;
    padding: 18px;
    font-size: 18px;
    line-height: 1;
    border: 0;
    height: 55px;
    border-radius: 10px;
    -webkit-appearance: none;
    padding-right: 10%;
}

.styled-select { 
    width: 100%; 
    overflow: hidden; 
    background: url(../images/bg/down-arrow.jpg) no-repeat right #FFF; 
    background-size: 60px; 
    height: 55px; 
    border-radius: 10px; 
}

谁能解决这个问题？

Answer 1

问题是，您在 select 本身的 css 中使用了 padding-right: 10%;。测量图像 - 选择的宽度约为 270px，10% 的 width 仅为 27px - 这是通过我的措施纠正。

要解决这个问题 - 箭头的 background-image 似乎是 60px 宽，所以使用 padding-right: 78px; (即背景图片的宽度为60px，18px表示您之前在移动媒体查询中设置的padding ).