Редактирование ввода type = "search" Псевдоэлемент Button ('x')

Я пытаюсь создать панель поиска, которая будет выглядеть красиво. Я сделал это, я сделал изображение строки поиска, и я добавляю изображение на задний план ввода, и я редактирую место и размер шрифта. Единственное, что я не могу найти для редактирования, это маленькая кнопка "x", которая появляется, когда я использую поиск типа ввода. Я хочу немного переместить его, чтобы он зафиксировал мое изображение в строке поиска.

Вот мой HTML:

<input id="search" name="Search" type="search" value="Search" />

Вот мой CSS:

#search{
    width: 480px;
    height: 49px;
    border: 3px solid black;
    padding: 1px 0 0 48px;
    font-size: 22px;
    color: blue;
    background-image: url('images/search.jpg');
    background-repeat: no-repeat;
    background-position: center;
    outline: 0;
}

Ответ 1

Стилизация кнопки "x" для отмены поиска в браузерах Webkit

Предполагая, что вы говорите о значке "Отменить поиск" [X], который появляется только в браузерах Webkit (Chrome, Safari, Opera), вы можете использовать -webkit-search-cancel-button псевдоэлемент. Например:

#Search::-webkit-search-cancel-button{
    position:relative;
    right:20px;    
}

Демонстрация: http://jsfiddle.net/5XKrc/1/

Снимок экрана:

Используя этот подход, вы даже можете создать свою собственную кнопку отмены, например, такой стиль:

#Search::-webkit-search-cancel-button{
    position:relative;
    right:20px;  

    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius:10px;
    background: red;
}

Вместо [X] создаст красный круг.

Демо http://jsfiddle.net/5XKrc/3/

Снимок экрана:

Для IE10 и выше вы можете использовать следующее для перемещения кнопки:

#Search::-ms-clear{
   margin-right:20px
}

Да, и используйте placeholder="Search" вместо value="Search" - оно будет отображать слово "поиск", когда ввод пуст, и автоматически удалит его, когда пользователь что-то наберет.

Ответ 2

Я хочу переместить [маленький значок "х"] немного влево, чтобы он исправил мое изображение в строке поиска.

Пользователи ожидают, что вещи не будут сильно двигаться, это пользовательский интерфейс. Если вы решили переместить значок "x", подумайте об использовании псевдоклассов и переместите вместо него значок поиска:

Если значок поиска встроен, ваше фоновое изображение переместится во второе изображение с атрибутом role="presentation" и поместит его сразу после input в разметку:

<input id="search" name="Search" type="search" value="Search" />
<svg role="presentation" class="i-search" viewBox="0 0 32 32" width="14" height="14" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3">
  <circle cx="14" cy="14" r="12" />
  <path d="M23 23 L30 30" />
</svg>

Расположите его там, где ожидает пользователь:

#search + svg {
  margin-left: -30px;
  margin-bottom: -2px;
}

Затем спрячьте и покажите его, используя псевдоклассы :placeholder-shown:

#search + svg {
  visibility: hidden;
}
#search:placeholder-shown + svg {
  visibility: visible;
}

Вы можете стилизовать значок "х", если хотите. Но вы можете не захотеть больше.

Ответ 3

Если кто-то обнаружит здесь (как я и думал) "как проверить этот элемент для применения пользовательских стилей?", вам нужно включить теневой DOM пользовательского агента, чтобы эти элементы вендора были доступны.

Для WebKit (Safari) & Blink (Chrome, Edge, Opera, Brave) браузеры, выполните следующие действия:

Откройте DevTools (Ctrl + Shift + I)
Найдите три вертикальные точки справа вверху и нажмите, чтобы открыть раскрывающееся меню
Нажмите "Настройки" в этом раскрывающемся меню (со второго по последний вариант в списке)
В открывшемся контекстном меню в разделе "Настройки" найдите "Элементы" внизу и включите "Показать теневой DOM агента пользователя"

Как видите, я человек культуры, если есть темная тема, я ее использую

Ответ 4

Я не уверен, что это то, что вы искали, но вы можете создать свою панель поиска, как это

fiddle

HTML

<div id="input">
<input type="text" id="tb" />
    <a id="close" href="#"><img src="http://www.ecoweb.info/sites/default/files/tips-close.png"></a>
</div>

CSS

#tb
{
    border:none;
}
#input
{
    padding:0px;
    border: 1px solid #999;
    width:150px;
}

#close
{
    float:right;
}