DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

Reset button for search field

Reset button for search field

Shashidhar.nkShashidhar.nk Posts: 21Questions: 5Answers: 0
in DataTables 1.10

Hi Allan,

I need to provide a reset button for search field. But As you mentioned here in the discussion
https://datatables.net//forums/discussion/comment/90418/#Comment_90418 ,
Bootstrap's styling will remove the clear icon from the search input. This is part of Bootstrap.

Is there any way to override style for Search field only???
cause, other than Datatables, full web page is built with bootstrap styling.
If bootstrap library is removed, reset button appears and works fine, but whole page looks VERY Ugly. Help me out.

Replies

  • allanallan Posts: 61,650Questions: 1Answers: 10,094 Site admin

    Add this to your CSS:

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

    It will override Bootstrap's hiding of the clear button.

    Allan

  • Shashidhar.nkShashidhar.nk Posts: 21Questions: 5Answers: 0

    Hi Allan,

    Thank You. Reset button appears now and works fine.

  • wolfarwolfar Posts: 1Questions: 0Answers: 0

    Hi Allan,
    All work fine.

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.