Textpattern CMS support forum
You are not logged in. Register | Login | Help
- Topics: Active | Unanswered
#1 2007-06-12 18:10:55
- FireFusion
- Member
- Registered: 2005-05-10
- Posts: 698
CSS Focus state of text area in the backend
Apply a focus state to text areas in the admin area.
I often don’t notice when I’ve lost focus of the current textarea and I hit backspace or something (sending my browser back a page).
A subtle but noticeable background color and/or border added to the focus state would help fix this. Perhaps something like this…
input.edit:focus, input.list:focus,
textarea:focus {
border: 1px solid #999;
background-color: #F3F3F3;
}Last edited by Jeremie (2007-06-13 18:21:42)
Offline
Re: CSS Focus state of text area in the backend
You mean, for the backend?
Offline
#3 2007-06-12 18:27:34
- FireFusion
- Member
- Registered: 2005-05-10
- Posts: 698
Re: CSS Focus state of text area in the backend
Yes
textpattern.css
Offline
Re: CSS Focus state of text area in the backend
Yup, good idea. Neat, simple, effective.
This could even be done for the 4.0 branch without breaking anything I guess.
Offline
Re: CSS Focus state of text area in the backend
I like the idea too.
with a small alteration on the border width and colour
css
input.edit:focus, input.list:focus,
textarea:focus {
border: 2px solid #ffcc33;
background-color: #F3F3F3;
}the suggested #999 and 1px might be too subtle. I would rather emphasize it more.
Last edited by colak (2007-06-13 08:29:08)
Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.
Offline
#6 2007-06-13 08:46:30
- FireFusion
- Member
- Registered: 2005-05-10
- Posts: 698
Re: CSS Focus state of text area in the backend
I think i’m right in saying only the good browsers support the “focus” attribute (not IE6 or 7). So if we’re going to use a 2px border we should change it to an outline, that way it doesn’t make the screen move by adding extra width.
I really like this…
input.edit:focus, input.list:focus,
textarea:focus {
outline: 3px double #ffcc33;
background-color: #fff;
}Or this…
input.edit:focus, input.list:focus,
textarea:focus {
outline: 2px dotted #ffcc33;
background-color: #fff;
}Last edited by FireFusion (2007-06-13 08:53:13)
Offline
#7 2007-06-13 09:06:21
- FireFusion
- Member
- Registered: 2005-05-10
- Posts: 698
Re: CSS Focus state of text area in the backend
Actually the single line ones don’t need something quite so thick.
input.edit:focus, input.list:focus {outline: 1px solid #ffcc33; background-color: #fff;}
textarea:focus {
outline: 3px double #ffcc33;
background-color: #fff;
}Don’t know if people like the white background but I do.
Last edited by FireFusion (2007-06-13 17:49:18)
Offline
#8 2007-06-13 17:47:55
- FireFusion
- Member
- Registered: 2005-05-10
- Posts: 698
Re: CSS Focus state of text area in the backend
Opps, Quick fix on the above.
Offline
Re: CSS Focus state of text area in the backend
By the way, I edited the thread’s subject to improve clarity and archiving/search.
Offline
Re: CSS Focus state of text area in the backend
1. don’t change the width of borders – if you go that route. That would cause layout reflow every time you change the focus on a textfield.
2. outline might work, but the proposed styling is way over the top – a 3px double outline ? duh.
3. why not change only the background colour of the textareas. The default textpattern.css sets those to some light grey, changing it to white could enough in that case.
Have you ever tested that kind of things with users on various OS ? Many find it disturbing to have form controls changed/styled. They prefer the default GUI/behaviour provided by the OS.
And – on the subject of styling form controls, this deserves a careful reading.
Where is that emoji for a solar powered submarine when you need it ?
Sand space – admin theme for Textpattern
Online
#11 2007-06-14 07:38:07
- FireFusion
- Member
- Registered: 2005-05-10
- Posts: 698
Re: CSS Focus state of text area in the backend
I agree that my 3px double styling is a bit over the top and shouldn’t be included. I personally love it though :D
Offline