Панель поиска не принимает кнопку закрытия
У меня есть эта панель поиска, но что бы я ни делал, мне кажется, что я не могу добавить маленький серый / черный «x», чтобы очистить текст в строке поиска. Хотел бы помочь с этим. Большое спасибо!
input[type=search] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 14px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
position: absolute;
right: 10px;
top: 3px;
}
input[type=search]:focus {
width: 25%;
}<input type = "search" id = "myInput" placeholder = "Search..">Вот это работает, да. Но у меня есть этот загрузчик: <link rel = "stylesheet" href = "maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap. min.css"> И пока я его использую, он не работает ..
—
20.10.2018 23:51
Поскольку здесь он работает, попробуйте вызвать стиль ПОСЛЕ вызова стиля начальной загрузки.
—
20.10.2018 23:59
Я нашел решение! В любом случае спасибо! : D
—
21.10.2018 00:14
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
4
28
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
У меня были проблемы с использованием начальной загрузки с "x". Однако я использовал этот CSS, и он отлично работал!
input[type=search] {
width: 130px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
font-size: 14px;
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
position: absolute;
right: 10px;
top: 3px;
}
input[type=search]:focus {
width: 25%;
}<input type = "search" id = "myInput" placeholder = "Search..">input[type = "search"] {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: searchfield;
}
input[type = "search"]::-webkit-search-cancel-button {
-webkit-appearance: searchfield-cancel-button;
} Другие вопросы по теме
Добавить класс CSS к элементу
CSS Влияние на элемент в другом месте кода
Размеры элементов отличаются в chrome dev-tools от установленных в css
Как рендерить сообщения блога django подряд?
Алмазная сетка на Flexbox
JQuery при отображении изменения клика
JavaScript: добавьте тег, специфичный для класса, в classList
Оформление списка по горизонтали
Ошибка Polaris Shopify при импорте style.css
Как повернуть элемент dom на заданную величину (чистый js)
Похожие вопросы
Добавить класс CSS к элементу
CSS Влияние на элемент в другом месте кода
Как настроить этот код jQuery для таргетинга на div?
Как рендерить сообщения блога django подряд?
Столбцы начальной загрузки не работают должным образом в инспекторе Google Chrome
Алмазная сетка на Flexbox
Перенаправление Web.config
JQuery при отображении изменения клика
Оформление списка по горизонтали
Использование JavaScript необходимо для группировки элементов
Вроде нормально работает.