Блог

Главная - Вопросы по программированию - CSS для пользовательского окна поиска Google

CSS для пользовательского окна поиска Google

#css #search

#css #Поиск

Вопрос:

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

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

Кто-нибудь знает, что я сделал неправильно? Я знаю, что это должно быть связано с таблицей searchNav, которая каким-то образом противоречит стилю .gsc-search-box, но я не знаю, как именно.

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

 #searchNav table { 
    border: 0;
    margin: 0;
}

#cse-search-form {
-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;
}

Ответ №1:

Ваш #searchNav table элемент имеет margin: 1em то, что перекрывает ваше окно поиска и предотвращает его выбор.

Комментарии:

1. Вот и все — большое вам спасибо. Теперь последнее: есть ли способ удалить ограничение «Улучшено Google» в окне поиска? Или как я могу сделать его хотя бы подходящим?

2. На самом деле, я только что удалил брендинг Google в настройках поисковой системы, поэтому текст исчез. Однако поле по-прежнему смещено, а курсор наполовину находится за пределами поля поиска. Но поле установлено равным 0…

3. После некоторой настройки теперь все выглядит в основном нормально. Но есть одна вещь, которая меня очень беспокоит, и я не могу понять, почему это происходит: в окне поиска нет нижней границы? Почему?

4. Пожалуйста, проголосуйте и примите ответ, если он решил вашу проблему 🙂

5. а что касается границы, вы tbody ее скрываете.

Метки: