CODEWITHSUNDEEP
htmlangularjs
Bruno Souza
Bruno Souza

Reputation: 53

Input type="search" - not enable in Chrome

My type = "search" does not enable the 'X' option to clear the imput in Chrome! Any solution?

<div layout="row  text-left" style="float:left; width:100%;">
      <md-input-container flex-offset="15" flex="70">
         <label>Pesquisar...</label> 
           <input type="search" ng-model="$ctrl.pesquisa" ng-disabled="'@ViewBag.EditaConteudo'">
      </md-input-container>
  </div>

Upvotes: 1

Views: 2768

Answers (1)

Calle Bergstr&#246;m
Calle Bergstr&#246;m

Reputation: 488

By the rules of specificity you should be able to overcome this by doing the following:

<input type="search" class="my-search" ng-model="$ctrl.pesquisa" ng-disabled="'@ViewBag.EditaConteudo'">

Accompanied by the following CSS

input[type="search"].my-search {
  -webkit-appearance: searchfield;
}

input[type="search"].my-search::-webkit-search-cancel-button {
  -webkit-appearance: searchfield-cancel-button;
}

However, as others have pointed out, this is originally an issue with the css framework you are using rather than Chrome.

Upvotes: 4

Related Questions