Disabling browser UI effects from CSS

Removing browser added effects on the form elements in HTML

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-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { display: none; }
    

Disclaimer

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.

About the author

DEJAN STOJANOVIC

Dejan is a passionate Software Architect/Developer. He is highly experienced in .NET programming platform including ASP.NET MVC and WebApi. He likes working on new technologies and exciting challenging projects

CONNECT WITH DEJAN