Я пытаюсь показать тег ввода типа Search. Я также использую bootstrap. Но когда я использую bootstrap .min. css, браузер Chrome больше не показывает «Очистить» или [X] в конце поля. Похоже, что Chrome таблица стилей пользовательского агента перезаписывает мой стиль сайта. Я не понимаю, почему это происходит.
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> </head> <body> <label for="gsearch">Search:</label> <input type="search" placeholder="Search anything" id="gsearch" name="gsearch"> </body> </html>
В свойствах я вижу что-то вроде этого:
Here is the fiddle link: https://jsfiddle.net/z1ujworf/1/
Если я удалю строку <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">, код создаст тег ввода с «Очистить» или [X] в правом конце (когда мы вводим что-то в поле ввода). Но я хочу использовать bootstrap и его стиль. Есть ли способ добиться этого?
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
Это происходит потому, что bootstrap (из normalize.less) переопределяет стили пользовательского агента по умолчанию.
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: searchfield-cancel-button !important; } <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <body> <label for="gsearch">Search:</label> <input type="search" placeholder="Search anything" id="gsearch" name="gsearch">
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration { -webkit-appearance: searchfield-cancel-button !important; }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <body> <label for="gsearch">Search:</label> <input type="search" placeholder="Search anything" id="gsearch" name="gsearch">