محاذاة عموديا المؤشر النص (الإقحام؟) في مربع إدخال مع مسج، جافا سكريبت أو CSS

Question

وأنا العبث مع CSS على مربع الإدخال في CSS، لجعل النص أكبر، إضافة الحدود، وتغيير اللون، الخ.

ولقد محاذاة النص أكبر لتناسب بشكل جيد (محاذاة عموديا) داخل مربع الإدخال الخاص بي باستخدام الحشو، ولكن يتم محاذاة قليلا وامض مؤشر النص بشكل رهيب (العناق أسفل). أنا أتساءل عما اذا كان هناك طريقة لضبط وامض المؤشر نص من تلقاء نفسها دون لخبطة المواقع من النص.

وشكرا! مات

وهيريس 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>

والنتيجة:

Answer 1

والمشكلة هي أنك لا مع الأخذ بعين الاعتبار الحشو على مربع الإدخال عندما كنت تحديد ذروته.

وأنت تحديد ارتفاع 32px، ولكن يحصل على إضافة أي الحشو لذلك، حتى في ذروة مربع الإدخال الخاص بك هو في الواقع 32 + 9 + 4 = 45px. يتم توسيط المؤشر عموديا في مربع الإدخال طويل القامة 45px، ولكن الحدود هو حول شعبة طويل القامة 32px. التغيير "الطول: 32px 'إلى' الطول: 19px". على مدخلات البحث ويعمل

وI (عالية جدا) نوصي باستخدام الحرائق . انها مفيدة جدا لمعرفة هذه الامور.

Answer 2

وSidenote: لا تحتاج div#search_icon، يمكن إدخال لديك الخلفية التالية:

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

Answer 3

وانها لا تبدو وكأنك تظهر جميع المغلق في المثال الخاص بك (هناك شعبة أو اثنين بوصفها الحدود؟)، ولكن هل حاولت إزالة السمة height ووضع padding-bottom إلى قيمة padding-top في (9px )؟