通过 MutationObserver 持续将 MDB select 的筛选输入框类型设为 search,确保在支持的浏览器中显示 WebKit 原生清除(✕)按钮,并为其设置了合适的样式,提升用户体验。
JS
1 // MDB select 的筛选输入框改为 search 类型,以显示原生清除(✕)按钮 2 // MDB 会在初始化/每次关闭后重建该输入框(重置为 text),故用 MutationObserver 持续纠正 3 var filterObserver = new MutationObserver(function () { 4 $('.select-filter-input[type="text"]').prop('type', 'search'); 5 }); 6 filterObserver.observe(document.body, { childList: true, subtree: true });
CSS
1 /* MDB select 筛选输入框改为 search 类型后,显示 WebKit 原生清除(✕)按钮 */ 2 .select-filter-input[type="search"]::-webkit-search-cancel-button { 3 -webkit-appearance: searchfield-cancel-button; 4 cursor: pointer; 5 }