html5 input di ricerca non funziona con bootstrap

Question

Ho testato l'input [type = "search"] e non funziona se aggiungo gli stili bootstrap. cioè, l'icona di cancellazione (x) non appare.

Answer 1

Un problema relativo al tuo è stato già pubblicato nel loro github https://github.com/twbs/bootstrap/issues/5624

Answer 2

Se stai usando Web Kit il problema potrebbe essere legato a quello che sk8terboi87 pubblicato.

Bootstrap non supporta lo stile degli ingressi di tipo Search perché è troppo difficile farlo in modo affidabile in Web Kit.

Bootstrap utilizza un reset CSS che rimuove il cross che di solito appare, è possibile recuperarlo modificando il core CSS, ma questo potrebbe causare problemi in futuro durante l'aggiornamento.

Se sta accadendo in altri browser, potrebbe essere un altro problema.

Answer 3

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; 
} 

lavori per me su Chrome (sul mio Mac, ma non sul mio iPhone ...)

Answer 4

di avere la stessa esperienza utente su tutti i dispositivi, ho finito per scrivere una direttiva angolare che ho messo su Bootstrap 'input-group-btn's.

angolare visualizzazione HTML

<div class="input-group"> 
    <input type="search" id="listItemSearch" class="form-control" 
     placeholder="Search text..." 
     title="Search" aria-label="Search" 
     data-ng-model-options="{'debounce':1500, 'updateOn':'blur default'}" 
     data-ng-model="vm.filters.listItemSearchText"/> 
    <span class="input-group-btn"> 
     <button type="button" class="btn btn-default" 
      data-ng-disabled="!vm.filters.listItemSearchText" 
      aria-describedby="listItemSearch" 
      data-clear-search-by-aria="#listItemSearch"> 
      <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> 
     </button> 
    </span> 
    <span class="input-group-addon"> 
     <span>{{vm.models.listSearchResults.length}}</span> 
     <span>/</span> 
     <span>{{vm.data.list.length}}</span> 
    </span> 
</div> 

direttiva angolare JavaScript

.directive('clearSearchByAria', ['$parse', function clearSearchByAria($parse) 
{ 
    return(
    { 
     'restrict':'A', 
     'link':function clearSearchByAria_link(scope, jqElem, ngAttr) 
     { 
      jqElem.on('click', function($event) 
      { 
       var $clickedElem = angular.element($event.currentTarget); 
       var $searchInput; 

       // Specified by selector. 
       if(!!ngAttr.clearSearchByAria) 
       { 
        var $specifiedElem = angular.element(ngAttr.clearSearchByAria) 
        if($specifiedElem.length == 1) 
        {$searchInput = $specifiedElem;} 
       } 
       else 
       { 
        var $describedElem = $clickedElem.find('[aria-describedby]').addBack('[aria-describedby]'); 
        // Specified by 'aria-describedby'. 
        if($describedElem.length == 1) 
        {$searchInput = angular.element(''.concat('#', $describedElem.attr('aria-describedby')));} 
        else 
        { 
         throw(new ReferenceError("'clear-search-by-aria' attributes requires either 1) to be empty and for the element (or a descendant) to have an 'aria-describedby' attribute referring to another element or 2) to specify an element selector (e.g. '#id') to another element.")); 
        } 
       } 

       if(!!$searchInput && $searchInput.length == 1) 
       { 
        var ng_model = $searchInput.data('ngModel') || $searchInput.attr('ng-model'); 
        if(!!ng_model) 
        { 
         var modelGetter = $parse(ng_model); 
         modelGetter.assign(scope, ''); 
         scope.$apply(); 
        } 
        else 
        { 
         $searchInput.val(''); 
        } 
       } 
      }); 
     }, 
    }); 
}])`