Opened 6 months ago

Last modified 6 months ago

#15330 new bug

checkbox/radio UI styling incompatibility with HTML5 "required" attribute

Reported by: PV9685 Owned by:
Priority: minor Milestone: none
Component: ui.core Version: 1.12.1
Keywords: Cc:
Blocked by: Blocking:

Description (last modified by Ryan J Ollos)

When using HTML5 form field validation it is common to think to simply "highlight invalid input fields when the user clicks submit by making them required". For other fields, adding the Required attribute and a bit of css such as below will highlight the invalid fields. Unfortunately, due to the design of these in JQueryUI checkbox/radio items do not display any affect.

textarea:invalid, select:invalid, input[type=text]:invalid, input[type=radio]:invalid, input[type=checkbox]:invalid {
  border: 2px dashed red;
  box-shadow: 0 4px 6px 0 red, 0 6px 18px 0 #D4D400;
}

Change History (1)

comment:1 Changed 6 months ago by Ryan J Ollos

Description: modified (diff)
Note: See TracTickets for help on using tickets.