Блог

На сайте, который я пытаюсь создать (https://www.dynomotion.com/test/index-search.htm ) У меня 2 проблемы:

1. курсор не фокусируется точно в окне поиска
2. серая нижняя граница размером 1 пиксель отсутствует

Кто-нибудь знает, что я поступил неправильно?

Для оформления поиска я использую следующий css:

 #cse-search-form {
   position: relative;
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
   border-radius: 0;
   background: #f2f2f2;
   padding: 0;
   margin:0;
}

.gsc-search-box-tools .gsc-search-box .gsc-input .gsc-input-box,
.gsc-search-box-tools .gsc-search-box .gsc-input .gsc-input-box-focus {
    height: 25px;  
    -webkit-border-top-left-radius: 0;
    -webkit-border-bottom-left-radius:0;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-bottomleft: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border: 1px solid #dadada;
    padding: 0;
    margin:0;
}
 

Любые указатели будут очень признательны!

Спасибо

Я нашел проблему, с которой вы столкнулись. Прежде всего, я хотел бы, чтобы вы предложили использовать инструмент Google developers для решения таких проблем. Теперь посмотрите, в чем проблема в строке поиска.

Ваш ввод в строке поиска находится внутри таблицы внутри с классом

 .gsib_a {
    padding: 5px 9px 4px 9px;
}
 

Смотрите Изображение для справки.

Он имеет отступ до 5 пикселей, поэтому верхняя часть отступа нажимает на область ввода ниже.

перезапишите этот класс с помощью:-

 .gsib_a {
    padding: 0px 9px 4px 9px;
}
 

Это область ввода с заполнением 0 пикселей сверху. Вот ссылка на изображение

Теперь, почему нет серой нижней границы.

Ваш div с классом <div class=»gsc-input-box> имеет высоту 25 пикселей и скрывает нижнюю границу вашей области ввода.

Это CSS, применяемый в настоящее время

 gsc-search-box-tools .gsc-search-box .gsc-input .gsc-input-box, .gsc-search-box-tools .gsc-search-box .gsc-input .gsc-input-box-focus {
    height: 25px;
    -webkit-border-top-left-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-bottomleft: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border: 1px solid #dadada;
    padding: 0;
    margin: 0;
}
 

Изображение для справки

Теперь решение для этого:

удалите высоту div: перезапишите этот CSS следующим образом

 .gsc-search-box-tools .gsc-search-box .gsc-input .gsc-input-box, .gsc-search-box-tools .gsc-search-box .gsc-input .gsc-input-box-focus {
    /* height: 25px; */ remove this height
    -webkit-border-top-left-radius: 0;
    -webkit-border-bottom-left-radius: 0;
    -moz-border-radius-topleft: 0;
    -moz-border-radius-bottomleft: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 1;
    border: 2x solid #dadada;
    padding: 0;
    margin: 0;
}
 

Исправленное изображение :

Удалите высоту div.

Ого! решена ваша проблема.

Примечание: Узнайте, используя инструменты Google для разработчиков, это действительно полезная информация для веб-разработчиков, с уважением, Бадал Шерпа