fix: input search box is missing its X or cross symbol in my bootstrap web project

problem:
input search box is missing its X or cross symbol in my bootstrap web project

if you have a bootstrap-enabled website, you may find that input HTML elements with type='search' are missing the usual X symbol.


solution:
bootstrap CSS is set to remove the X symbol.

a quick fix is to comment out the relevant CSS in bootstrap.css:

/*SR we DO want the X to appear in input box

input[type="search"] {
  -webkit-box-sizing: content-box;
     -moz-box-sizing: content-box;
          box-sizing: content-box;
  -webkit-appearance: textfield;
}

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}*/


note: you may also need to update the minimized CSS file:

bootstrap.min.css

Comments