样式选择文本溢出

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

问题是,你padding-right: 10%;在自己的css 中使用select它.测量图像 - 选择是近似的,只270px做出- 这是我的措施所正确的.10%width27px

要解决这个问题 - background-imagefor arrow似乎很60px宽,所以请使用padding-right: 78px;(60px用于背景图像width并18px尊重padding之前设置的移动媒体查询).