css the float right option changed the selector

Problem

I make a simple selector like this:

enter image description here

when I make the float:right, I got this:

enter image description here

please see the red circle to know what is the problem.

css

/* The CSS */
select {
    padding:3px;
    margin: 0;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    border-radius:4px;
    float:right;
    -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;
}

/* Targetting Webkit browsers only. FF will show the dropdown arrow with so much padding. */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    select {padding-right:18px}
}

label {position:relative}
label:after {
    content:'<>';
    font:11px "Consolas", monospace;
    color:#aaa;
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -ms-transform:rotate(90deg);
    transform:rotate(90deg);
    right:8px; top:2px;
    padding:0 0 2px;
    border-bottom:1px solid #ddd;
    position:absolute;
    pointer-events:none;
}
label:before {
    content:'';
    right:6px; top:0px;
    width:20px; height:20px;
    background:#f8f8f8;
    position:absolute;
    pointer-events:none;
    display:block;
}

the float:right that I changed, and that is making the problem, exist in the select in the css

Problem courtesy of: user3432257

Solution

Its a little tricky to identify without more HTML/CSS but it seems to be because the selection box and the element circled in red are two seperate elements and you've only floated one.

What you may want to do is wrap both in a div and apply float:right to this. This will mean that everything within the div is floated (both the selection box and the element encircled)

Solution courtesy of: SW4

Discussion

There is currently no discussion for this recipe.

This recipe can be found in it's original form on Stack Over Flow.