36

我已经测试过，当应用引导样式时input[type="search"]它没有显示清除图标。(x)

4

5 回答 5

55 
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 上......）

于 2013-09-15T14:38:13.683 回答
8

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

于 2012-12-19T16:37:16.253 回答
1

如果您使用的是 Web Kit，您的问题可能与 sk8terboi87 发布的内容有关。

Bootstrap 不支持Search为您设置类型输入的样式，因为在 Web Kit 中很难做到可靠。

Bootstrap 使用了一个重置​​ CSS，它移除了通常出现的交叉，您可以通过修改核心 CSS 将其恢复，但这可能会在将来升级时导致问题。

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

于 2012-12-19T16:44:36.407 回答
1

为了在所有设备上获得相同的用户体验，我最终编写了一个 Angular 指令，并将其放在 Bootstrap 'input-group-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>

Angular 指令 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( '' );
                    }
                }
            });
        },
    });
}])`
于 2017-06-20T17:21:15.413 回答
1

将输入类型更改为 'search' 而不是 'text' 和 -webkit-appearance: block 而不是 'none'

于 2020-05-07T06:30:48.233 回答