Disabling browser UI effects from CSS

Removing browser added effects on the form elements in HTML

  • Share

New version of browsers are bringing a lots of useful features, but among them there are some features that can actually ruin your UI concept. The following are just some of the most common ones and instructions how to disable them.

Disable textarea rezise

resize: none;

Remove webkit form decoration

-webkit-appearance: none;

Remove IE clear button from search and text input

input[type=text]::-ms-clear,input[type=search]::-ms-clear {  display: none; width : 0; height: 0; }
input[type=text]::-ms-reveal,input[type=search]::-ms-reveal {  display: none; width : 0; height: 0; }

Remove Webkit clear button from search input

input[type="search"]::-webkit-search-results-decoration { display: none; }

  • Share


Purpose of the code contained in snippets or available for download in this article is solely for learning and demo purposes. Author will not be held responsible for any failure or damages caused due to any other usage.

Comments for this article

comments powered by Disqus