Grow your CSS skills. Land your dream job.

Improved Current Field Highlighting and "ul"

  • # March 1, 2010 at 5:21 pm

    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;
    }

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".