Menu déroulant HTML Select : de droite à gauche

Question

J'essaie de faire en sorte que la liste déroulante du menu de sélection HTML commence à droite et se dirige vers la gauche. Comme ici - http://www.flipkart.com/ Mais ça n'arrive pas. Il part actuellement de la gauche et se dirige vers la droite. Et dans IE, le menu déroulant est caché.

Code -

<div class="search fr curves3">  
    <input class="main_search curves3" type="text" value="" placeholder="Search for items">
    <span style="border-left:1px solid #999; float:left;">
    <select>
        <option>All Categories</option>
        <option>Cat</option>
        <option>Dog</option>
        <option>Bird Categories Categories Categories</option>
        <option>Aquatics</option>
    </select>
    </span>
    <input type="submit" value="search" name="Search">
</div>     

CSS -

.search {
border:1px solid #999;
}
.search .main_search {
float:left;
padding: 7px 0 7px 5px;
border:0;
outline:none;
margin:0;
}
.search select {
float:left;
border:0;
outline:none;
padding: 7px 10px 7px 10px;
margin:0;
width:130px;
} 

JSfiddle - http://jsfiddle.net/generalsagar/gQxR7/

Comment faire en sorte que la liste déroulante commence à droite et s'écoule ensuite vers la gauche ? Merci

Answer 1

Utiliser absolute positionnement. Votre css pour la boîte de recherche sera quelque chose comme ceci

.search {
    border:1px solid #999;
    position:absolute;
    right:0;
}

Démonstration de JS Fiddle