Allineamento verticale del cursore di testo (punto di inserimento?) In una casella di input con jQuery, Javascript o CSS

Question

Sto scherzando con il CSS su una casella di input nel CSS, per ingrandire il testo, aggiungere un bordo, cambiare colore, ecc.

Ho allineato il testo più grande per adattarlo bene (allineato verticalmente) nella mia casella di input usando il riempimento, ma il piccolo cursore del testo lampeggiante è terribilmente allineato (abbraccia il fondo). Mi chiedo se c'è un modo per regolare il cursore del testo lampeggiante da solo senza incasinare il posizionamento del testo.

Grazie! Matt

Ecco il 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>

Risultato:

Answer 1

Il tuo problema è che non stai tenendo conto dell'imbottitura nella casella di input quando ne specifichi l'altezza.

Stai specificando un'altezza di 32px, ma qualsiasi imbottitura viene aggiunta a quella, quindi l'altezza della tua casella di input è in realtà 32 + 9 + 4 = 45px. Il cursore viene centrato verticalmente nella casella di input alta 45px, ma il bordo è attorno al div alto 32px. Cambia "height: 32px" in "height: 19px" nell'input di ricerca e funziona.

Consiglio (vivamente) di utilizzare Firebug . È molto utile per capire questo genere di cose.

Answer 2

Sidenote: non è necessario div # search_icon , il tuo input potrebbe avere il seguente background:

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

Answer 3

Non sembra che tu stia mostrando tutti i CSS nel tuo esempio (c'è un div o due che agisce come bordo?), ma hai provato a rimuovere l'attributo height e l'impostazione il valore da padding-bottom a padding-top ( 9px )?