CODEWITHSUNDEEP
htmlcssbootstrap-4
Isentropic
Isentropic

Reputation: 145

How to show X (Clear) in Chrome INPUT with type Search while using bootstrap?

I am trying to show an Input tag of type Search. I am also using bootstrap. But when I use bootstrap.min.css, the Chrome browser no longer shows the "Clear" or [X] at the end of the box. Looks like Chrome user agent stylesheet overwriting my site style. I am not understanding why it is happening.

<!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>

In properties I see something like this:

Style

Here is the fiddle link: https://jsfiddle.net/z1ujworf/1/

If I remove the line <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> , the code creates input tag with "Clear" or [X] at the right end (When we type something in the input field). But I want to use bootstrap and its styling. Is there any way to achieve it?

Upvotes: 1

Views: 1742

Answers (1)

kiranvj
kiranvj

Reputation: 34127

This happens because bootstrap (from normalize.less) overrides the default user agent styles.

enter image description here

You can override this from your CSS like below

input[type=search]::-webkit-search-cancel-button, 
input[type=search]::-webkit-search-decoration {
    -webkit-appearance: searchfield-cancel-button !important;
}

Working sample (tested in chrome)

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">

Upvotes: 1

Related Questions