Style select text overflow

Question

Trying to figure out a problem with a styled select box. It is wrapped within a div with a background to create a mask-look to it.

When there is too much text in the input it will overflow into the button.

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; 
}

Can anyone solve this?

Answer 1

The problem is, that you are using padding-right: 10%; in your css on the select itself. Measuring the image - the select is approx 270px wide, making 10% of the width only 27px - which is correct by my measures.

To solve this - the background-image for arrow seems to be 60px wide, so use padding-right: 78px; (that is 60px for the background image's width and 18px to respect the padding in mobile media query you've previously set).