Aligner verticalement le curseur de texte (caret?) Dans une boîte de saisie avec jQuery, Javascript ou CSS

Question

Je suis en train de jouer avec le CSS sur une boîte de saisie en CSS, pour agrandir le texte, ajouter une bordure, changer de couleur, etc.

J'ai aligné le texte le plus grand pour l'ajuster correctement (aligné verticalement) dans ma boîte d'entrée en utilisant le remplissage, mais le petit curseur de texte clignotant est terriblement aligné (caline le fond). Je me demande s'il existe un moyen d'ajuster seul le curseur de texte clignotant sans gâcher le positionnement du texte.

Merci! Matt

Heres CSS:

div#search_box { 
    height:32px; 
    width: 366px; 
    float:left; 
    margin-left:86px; 
    margin-top:14px; 
    background-color: #ffffff; 
    border: 2px solid #b66b01; 
} 

input#search_input { 
    border:none; 
    position: relative; 
    float: left; 
    height: 32px; 
    width: 335px; 
    font-size: 18px; 
    padding-top: 9px; 
    padding-left: 4px; 
    outline-style:none; 
    font-family: Helvetica, Arial, "MS Trebuchet", sans-serif; 
    color: #5a5a5a; 
} 

div#search_icon { 
    width:22px; 
    height:24px; 
    float:right; 
    margin-right:5px; 
    margin-top:4px; 
    cursor: pointer; 
    background: url('images/magnifier.png'); 
} 

HTML:

<div id="search_box"> 
    <input type="text" name="query" id="search_input" autocomplete="off"/> 
    <div id="search_icon"> 
</div> 

Résultat:

search http://i26.tinypic.com/29lhjf9.png

Answer 1

Votre problème est que vous n'êtes pas tenu compte de rembourrage sur la zone de saisie lorsque vous spécifiez son la taille.

Vous spécifiez une hauteur de 32px, mais tout remplissage est ajouté à cela, de sorte que la hauteur de votre zone de saisie est en réalité 32 + 9 + 4 = 45px. Le curseur est centré verticalement dans la zone d'entrée 45px, mais votre bordure est autour de la div 32px. Changez 'height: 32px' en 'height: 19px' sur l'entrée de recherche et cela fonctionne.

Je (très fortement) recommande d'utiliser Firebug. C'est très utile pour comprendre ce genre de choses.

Answer 2

Il ne ressemble pas à vous montrer tous les css dans votre exemple (y a-t-il un div ou deux qui agissent comme la frontière?), bu t avez-vous essayé de supprimer l'attribut height et de définir la valeur de padding-bottom à padding-top (9px)?

Answer 3

Sidenote: vous n'avez pas besoin div#search_icon, votre entrée pourrait avoir l'arrière-plan suivant:

background: white url('images/magnifier.png') no-repeat right NNpx;