Style span element on focus

Question

The problem I am having is hard coding the style element focus in a HTML tag. On the css page it looks something like this:

span.select.focus {
    background:rgba(189, 189, 189);
    border-right:solid 8px rgba(170, 194, 31, 0) !important;
}

Where is I can hard style the element without the focus

<span data-prefix="Shopping cart: " class="select profile" id="wordsPerQuiz" style="background-color: rgb (189,189,189)"> </span>

Here is my attempt.

  <span data-prefix="Shopping cart: " class="select profile" id="wordsPerQuiz" style="background-color: rgb (189,189,189)" focus="background-color: rgb (189,189,189)"> </span>

Your CSS is failing because there is no class of `focus` applied. did you mean `:focus`? — Paulie_D, Feb 26 '15 at 13:12
You can't call Focus in HTML. http://stackoverflow.com/questions/5293280/css-pseudo-classes-with-inline-styles — dowomenfart, Feb 26 '15 at 13:16
`background:rgba(189, 189, 189);` needs one more value for opacity `background:rgba(189, 189, 189, 0.7);` — anpsmn, Feb 26 '15 at 13:17
The code, as it stands, doesn't allow the span to gain focus in the first place. — Quentin, Feb 26 '15 at 13:17

pavel · Answer 1 · 2015-02-26T13:45:23.523

2

Pseudoclass focus needs to : before, not .:

span.select:focus {
    background:rgb(189, 189, 189);
    border-right:solid 8px rgba(170, 194, 31, 0) !important;
}

Element with span.select.focus selector is <span class="select focus"> in HTML.

edited Feb 26 '15 at 13:45

answered Feb 26 '15 at 13:14

pavel

26,538
10
45
61

Style span element on focus

1 Answers1