Bonjour à tous j'ai suivi le tutoriel intitulé Faux placeholder. La partie jQuery se déroule à merveille. En revanche, j'ai noté un soucis dans ma mise en page, c'est pourquoi j’appelle au secours.
Pour styliser ma barre de recherche j'ai donc :
-
une div.fade avec un contour semi-transparent gris de 5px
-
une div.placeholder avec un contour gris de 1px et un fond blanc
-
le fameux input qui pose problème avec un fond transparent
Comme vous pouvez le remarquer le input ne prend pas la totalité de la largeur de la div.placeholder. J'ai essayé dans le CSS de mettre width:100% cependant il faudrait enlever quelques pixel à cette largeur. J'ai lu sur certains forum qu'avec un margin et un width:auto ça devrait faire l'affaire du coup je suis resté la dessus mais ça ne prend pas toute la largeur de la div parent.
Une dernière précision je travaille avec un design fluide donc je travaille en pourcentage pour toutes les largeurs.
Le code HTML :
<div id="search">
<h2>Recherche</h2>
<div class="fade">
<div class="placeholder">
<form>
<label for="search">Recherche</label><input type="text" id="search" name="search"/>
</form>
</div>
</div>
</div>
Le CSS :
#search .fade{
background:rgba(238, 238, 238, 0.7);
margin:0;
padding:5px;
width:auto;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#search .placeholder{
margin:0px;
height:25px;
position:relative;
border:1px solid #CCCCCC;
color:#666666;
background-color:#FFFFFF;
}
#search .placeholder label{
position:absolute;
top:0;
left: 6px;
line-height:25px;
font-family: 'Droid Sans', sans-serif;
font-size:12px;
font-weight: 400;
color:#666666;
}
#search .placeholder input[type="text"]{
position:absolute;
top:0;
left:0;
font-family: 'Droid Sans', sans-serif;
font-size:12px;
font-weight: 400;
color:#666666;
height:21px;
background-color:transparent;
padding:2px 5px;
margin:0;
width:auto;
border:none;
}
Digikube
