html5搜索输入不适用于引导

我已经测试了

输入[type=“search”]

，当应用引导样式时，它不会显示清除的

（x）

图标。

与您相关的问题已经发布在他们的github中

---

如果您正在使用网络工具包，您的问题可能与sk8terboi87发布的内容有关

Bootstrap不支持为您设置

搜索

类型输入的样式，因为在Web工具包中很难可靠地完成

Bootstrap使用重置CSS来移除通常出现的十字，您可以通过修改核心CSS将其取回，但这可能会导致将来升级时出现问题

如果它发生在其他浏览器中，这可能是另一个问题

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

---

我在Chrome上工作（在我的Mac上，但在我的iPhone上不工作…

为了在所有设备上都有相同的用户体验，我最后写了一个角度指令，放在Bootstrap的输入组btn上

角度视图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>

---

将输入类型更改为“搜索”而不是“文本”，并将-webkit外观更改为-block而不是“无”

不确定此处的含义。您正在“添加”哪些引导样式？默认搜索输入框样式由浏览器提供，只要它不小于IE9。然后它将是一个默认的文本框。Paystey，它可以工作，但是当我添加引导样式时，它就停止了。查看我添加的小提琴链接实际上，对于取消按钮，我认为您只需要这一点：输入[type=“search”]：-webkit search cancel button{-webkit外观：searchfield cancel button；}@Giolvani请为每个人做一个坚实的分析，并标记正确答案！谢谢你，蒂埃里

.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( '' );
                    }
                }
            });
        },
    });
}])`