Member Avatar for Tko_1

Right so as the title says im trying to show the selected option from my radio type to be highlighted. I know this can be done with css as it is done here however i can not implement it within this script. Any help would be very appreciated, thank you.

$HTML .= '<div class="required">' . "\n";
        $HTML .= '  <label for="contest-q' . $scoreboard['questions'][$i]['number'] . '">' .
            str_format( $scoreboard['questions'][$i]['name'] ) . '</label>' . "\n";
        $HTML .= 'option A<input type="radio" class="underline-on-hover" name="contest[' . $scoreboard['questions'][$i]['number'] . ']" value="A""' .
            ( isset( $entry[$i] ) ? str_format( $entry[$i] ) : '' ) .
            '" id="contest-q' . $scoreboard['questions'][$i]['number'] . '" />' . "\n";


            str_format( $scoreboard['questions'][$i]['name'] ) . '</label>' . "\n";
        $HTML .= '  option B<input type="radio" name="contest[' . $scoreboard['questions'][$i]['number'] . ']" value="B""' .
            ( isset( $entry[$i] ) ? str_format( $entry[$i] ) : '' ) .
            '" id="contest-q' . $scoreboard['questions'][$i]['number'] . '" />' . "\n";

            str_format( $scoreboard['questions'][$i]['name'] ) . '</label>' . "\n";
        $HTML .= '  None<input type="radio" name="contest[' . $scoreboard['questions'][$i]['number'] . ']" value="none""' . 
            ( isset( $entry[$i] ) ? str_format( $entry[$i] ) : '' ) .
            '" id="contest-q' . $scoreboard['questions'][$i]['number'] . '" />' .  "\n";

        $HTML .= '</div>' . "\n";
  • 2 Contributors
  • 1 Reply
  • 288 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by gentlemedia

Dani AI

Generated

As 's output shows, the core problem is markup and selector mismatch (and a few syntax issues in the generated strings). As noted, CSS cannot select a previous sibling, so either change the HTML order or make the label a wrapper/sibling that can be targeted. Below are two simple, accessible patterns that avoid JavaScript, plus practical server-side fixes and debugging tips.

<!-- pattern: input BEFORE label (use id + for) -->
<input id="q1-A" type="radio" name="contest[1]" value="A">
<label for="q1-A" class="choice">Option A</label>

<!-- CSS -->
input[type="radio"] { position: absolute; left: -9999px; }
input[type="radio"]:checked + label.choice {
  background: #fff7d9;
  border: 1px solid #e4c96a;
  border-radius: 4px;
}
input[type="radio"]:focus + label.choice { outline: 2px solid #7fbfff; }
<!-- pattern: input INSIDE label (good when generators make changing order hard) -->
<label class="choice">
  <input type="radio" name="contest[1]" value="A">
  <span class="text">Option A</span>
</label>

<!-- CSS -->
.choice { cursor: pointer; display: inline-flex; align-items: center; }
.choice .text { padding: 6px 10px; border-radius: 4px; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice input:checked + .text { background: #e6f7ff; border: 1px solid #9ed7ff; }

Server-side notes and quick fixes: generate unique IDs (for example contest-q{n}-A) so for attributes work; avoid duplicate IDs; remove stray double-quotes in attributes; escape labels with htmlspecialchars. For pre-selecting, output checked when the saved value equals the option (e.g. if ($entry[$n]==='A') echo ' checked';). When markup cannot be changed, use a small change listener to toggle an "active" class on the correct label (as suggested) rather than trying to style a previous sibling in pure CSS.

Debug checklist: view page source to confirm order and IDs, inspect with DevTools to see which selector matches, fix invalid HTML (duplicate IDs/extra quotes) and add visible focus styles for keyboard users.

Member Avatar for gentlemedia

So if I'm right then in the HTML output/source order the label element is before the input tag?
Like that you can't select the label with CSS. Either place the label after the input or use JS/jQuery to select the label.

jQuery:

$(function() {
    $('input:radio[name="sex"]').change(function() {
        if (this.checked) {
          $(this).prev('label').addClass('active').siblings('label').removeClass('active')
        }
    });
});

CSS:

label.active { background-color: #FFFF00 }

https://jsfiddle.net/gentlemedia/g1b57rew/

Edited by gentlemedia
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.