Hover CSS is taking precedence over focus
Closed this issue · 3 comments
solsticesurfer commented
The hover effect is taking precedence over the focus event on grid-form fields. The result is that a field will not use its focus color until the mouse is moved away from the field that has focus. The expected behavior would be to highlight the field when clicked on.
The fix is very easy: in gridforms.css, simply swap the CSS declarations for focus and hover, lines 21-23 from
21: .grid-form [data-row-span] [data-field-span].focus { background: #fffad4; }
22: .grid-form [data-row-span] [data-field-span].focus label { color: #262626; }
23: .grid-form [data-row-span] [data-field-span]:hover { background: #fffded; cursor: text; }
to
21: .grid-form [data-row-span] [data-field-span]:hover { background: #fffded; cursor: text; }
22: .grid-form [data-row-span] [data-field-span].focus { background: #fffad4; }
23: .grid-form [data-row-span] [data-field-span].focus label { color: #262626; }
kumailht commented
Nice bug spotting skills there! Would you like to contribute a pull request with the changes?
solsticesurfer commented
Happy to give it a go.
kumailht commented