http://css-tricks.com/improved-current-field-highlighting-in-forms/
I realized I forgot to include the original article!
I am using this technique for a long form page. I’ve managed to set it up for long sections of checkboxes so that you can now see the entire section highlighted.
The problem is that if I indent any of the checkboxes (using "UL"), I lose the styling or the ability to highlight the entire section defined by ‘div class="single-field"’. I took a try at creating a new "UL" style that also triggers the highlight… however it ends up selecting only the indented section.
I’ve created 2 screenshots to explain. "divhighlighted1.jpg" is when the entire div is highlighted. "ulhighlighted1.jpg" is when just the UL is highlighted.
Thanks for the assistance!
Dan
Code:
div.single-field {
padding: 10px;
position: relative;
}
ul.single-field {
padding: 10px;
position: relative;
}
.tl {
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 10px;
background: url(../images/corner-topleft.jpg);
display: none;
}
.tr {
position: absolute;
top: 0;
right: 0;
width: 10px;
height: 10px;
background: url(../images/corner-topright.jpg);
display: none;
}
.bl {
position: absolute;
bottom: 0;
left: 0;
width: 10px;
height: 10px;
background: url(../images/corner-bottomleft.jpg);
display: none;
}
.br {
position: absolute;
bottom: 0;
right: 0;
width: 10px;
height: 10px;
background: url(../images/corner-bottomright.jpg);
display: none;
}
div.curFocus {
background: #fdecc2;
}
ul.curFocus {
background: #fdecc2;
}
