CODEWITHSUNDEEP
jqueryhtmlcss
user3630521
user3630521

Reputation: 35

css dropdown menu screen problem on latest firefox version

I have css dropdown menu. it is working fine with choreme or old firefox versions but when I display with the firefox lastest version and internet explorer I am getting the some problems. How can I fix it?

<div class="btnRent"> 
<label>
    <select>
        <option selected> Select Box </option>
        <option>Short Option</option>
        <option>This Is A Longer Option</option>
    </select>
</label>
</div>

css

/* The CSS */
.btnRent select {
    padding:3px;
    margin: 0;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    -webkit-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    -moz-box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    box-shadow: 0 3px 0 #ccc, 0 -1px #fff inset;
    background: #f8f8f8;
    color:#888;
    border:none;
    outline:none;
    display: inline-block;
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    cursor:pointer;
}

.btnRent label {position:relative; text-align:center;}
.btnRent label:after {
    content: "<>";
    font: 11px "Consolas",monospace;
    color: #AAA;
    transform: rotate(90deg);
    right: -1px;
    top: -1px;
    padding: 0px 0px 2px;
    position: absolute;
    pointer-events: none;
    border: 0px none;
    outline: 0px none;
    width: 25px;
    height: 20px;
    float: right;
    background: #f8f8f8;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.btnRent label:before {
    content:'';
    right:6px; top:0px;
    width:20px; height:20px;
    border: 0;
    outline: 0;
    background:#f8f8f8;
    position:absolute;
    pointer-events:none;
    display:block;
}

Upvotes: 0

Views: 309

Answers (1)

Mathias Rechtzigel
Mathias Rechtzigel

Reputation: 3604

This is a bug with the latest version of FireFox. See more here: Firefox 30 is not hiding select box arrows anymore

A quick way to resolve this bug is to wrap it in a container that is not as wide as your select drop down. You would then style the container with a dropdown arrow.

Here's an example.

HTML

<div class="select-hide">
    <select>
        <option>1</option>
        <option>1</option>
        <option>1</option>
        <option>1</option>
    </select>
</div>

CSS

.select-hide{
    width: 85px;
    overflow:hidden;
    border:1px solid red;
}

select{
    width: 100px;
}

Upvotes: 1

Related Questions