Changing background color of button with inline CSS

Question

I'm trying to change the background color of my submit button with inline CSS. Here's my code that isn't working:

<input name="submit" type="submit" value="Get My Free Quote!" style="font-size:20pt;input:focus{background-color:#1789E1}" class="slickbutton">

Is this not possible to do with inline CSS because it does work when I change it in my CSS file, but not when I do it inline...

Answer 1

Well, I see you are trying to change it's color on focus. You can't use :focus within inline css. You have to resort to a class or id.

Answer 2

No, you can't use pseudo-class (hover, focus, active, etc..) with inline css.
To accomplish what you want here, you can use either of the following:

• external css file
• css style tag (in-file css)
• javascript

for more detailed explanation, see this: CSS Pseudo-classes with inline styles