Hello,
I am wondering if its possible to remove the default blue and yellow glow when I click on a text input / text area using CSS?
Thank you for your time.
+19
A:
textarea, input{ outline:none;}
Although, it's been argued that keeping the glow/outline is actually beneficial for accessibility as it can help users see which Element is currently focused.
ajm
2009-06-01 16:25:59
Perfect, thankyou very much. Also wondering, can I remove the textarea resize option also (at the bottom right of textarea)?
Alec Smart
2009-06-01 16:30:40
+1 for the caution; *please* try to avoid doing anything which breaks the user's expectation of how their platform performs; you may actually be harming their productivity and making your web site harder to use.
Rob
2009-06-01 16:31:58
Yes, set the max-height and max-width.
Tyler Rash
2009-06-01 16:32:04
max-whatever do not work in IE6, if I'm not mistaking
marcgg
2009-06-01 16:37:03
and @ajm, thanks! I didn't know that, I thought it was here to stay with no way to fix it.
marcgg
2009-06-01 16:37:52
Remove my chrome/safari textarea resize option at your own peril! I find it really useful, indispensible even on some sites.
JeeBee
2009-06-01 16:42:11
Am not removing the resize option, but thought it would be good to know just in case :)
Alec Smart
2009-06-01 16:45:37
@Marc G: That isn't relevant here. The question was about disabling the textarea resize feature in Safari and Chrome -- a feature that doesn't exist in IE.
Tyler Rash
2009-06-01 17:34:12
Very interesting, this outline CSS rule seems to be very under-used.
Liam
2009-12-16 17:29:12
+3
A:
On textarea resizing in webkit based browsers:
Setting max-height and max-width on the textarea will not remove the visual resize handle. Try:
resize: none;
(and yes I agree with "try to avoid doing anything which breaks the user's expectation", but sometimes it does make sense, i.e. in the context of a web application)
To customize the look and feel of webkit form elements from scratch:
-webkit-appearance: none;
Thomas Maas
2009-06-02 07:15:48