a blog for those who code

Sunday 14 December 2014

How to remove Text Area or Text Input Glow

As now we have a number of browsers and all browsers are different from others in some aspect. Now to control user experience, developers have to hack their code to make their website look alike in all the browser. In this post we will show you a hack or you can say a CSS tip to remove Text Area or Text Input Glow in chrome.

Sometimes you will find that buttons, input fields and drop down boxes look different in different browser. Text Area in Chrome looks like below when comes in focus.

What we can see is a big bold glow effect around the real input area. Thus we will show you how to fix this issue using CSS which is very easy. You need to set the outline property to none for when this field is in focus.

input: focus { outline : none; }

Now this is not enough as you have to set { outline : none } for each and every components which is a little tiresome. As glow effect is happening for buttons and drop downs as well.

So, instead of doing like :

input: focus { outline : none; }

we can simply do

:focus {
outline-color: transparent;
outline-style : none;

Now you might ask that why we should disable it, as it is helping the user to know that they are on some component. Good question, but as we have already said that this glow effect doesn't work on all the browsers. If you need to add the glow effect in all the browser you have to over-right the :focus property.

Please Like and Share the Blog, if you find it interesting and helpful.

No comments:

Post a Comment