Input:hover[type="submit"]

Hi everyone,
This is my code:

<!DOCTYPE html>
<html lang = "en">
<head>
	<title>test</title>
	<style>
		input:hover[type="submit"] 
		{
			background: red;
		}
		
	</style>
</head>
<body>
	<form method = "GET" action = "test.php" >
		<label for = "fromDAte" >xxx</label>
		<input type = "date" name = "fromDate" >
		<input type="submit"  name = "myInput">									
	</form>
</body>
</html>

When I run it I get screenshot no. 1 as displayed at the attached image. When I “submit” is hovered I get screenshot
no. 2, “submit” in red, exactly like required by the code above.
When I add “submit” a style the “submit” input tag looks like this:

<input type="submit"  name = "myInput" style = "background-color: blue">	

the whole code looks like this:

<!DOCTYPE html>
<html lang = "en">
<head>
	<title>test</title>
	<style>
		input:hover[type="submit"] 
		{
			background: red;
		}
		
	</style>
</head>
<body>
	<form method = "GET" action = "test.php" >
		<label for = "fromDAte" >xxx</label>
		<input type = "date" name = "fromDate" >
		<input type="submit"  name = "myInput" style = "background-color: blue">									
	</form>
</body>
</html>

And the new display look like “3” at the attached image.
But !!!
When I hover over "submit color remains blue and is not changed to red despite the internal style sheet that
works fine until “background-color” style is added at inline style.
My question is:
Why does “input:hover[type=“submit”]” not work after I add inline style “background-color”?
Thanks

Have you tried

input[type="submit"]:hover

After all, it’s the input not the hover that has type of submit.

Because in-line style will override external css.
Just one of many reasons to not use in-line styles.

The only way to beat it is use !important on the css, if you are insistent on having horrible code.

The proper way would be to add the blue background in the css.

3 Likes

Thank you gandalf458.
Unfortunately “input[type=“submit”]:hover” doesnt change the “background-color” either.

1 Like

Thank you Sama74. You were helpful.
I know "in-line style will override external css’ but I thought we were dealing with 2 different selectors…
Thanks a lot !

Sorry, my bad. I’m glad Sam came to the rescue. I still doesn’t look right to me!

Yes I prefer to have :hover at the end but I believe the specs say you can have the attribute selectors and pseudo classes in any order.

A simple selector is either a type selector or universal selector followed immediately by zero or more attribute selectors, ID selectors, or pseudo-classes, in any order. The simple selector matches if all of its components match.

The selector was the same but you were dealing with ‘dynamic pseudo-classes’ which just add a level of specificity to the rule. That means the inline style rules trump the specificity. (Note that you cannot apply ‘dynamic pseudo-classes’ via inline styles at all.)

6 Likes

Thanks !
I noticed I couldn’t add a pseudo class inline.
Thanks again.

So do also I prefer to have it! :slight_smile:
Hope you don’t mind If I mention the exeption to that rule of thumb: If you target a pseudo element on hover the pseudo element should be at the end. The specs’ next paragraph also say:

One pseudo-element may be appended to the last simple selector in a chain, in which case the style information applies to a subpart of each subject.

If anyone would like to test how the :hover:after vs :after:hover works:

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8">
<title>Title</title>
<meta name="generator" content="PSPad editor, www.pspad.com">
<style>
a{
    display:block;
    margin:auto;
    border:solid;
    width:200px;
    height:100px;
    line-height:33px;
    text-align:center;
    text-decoration:none;
}
a:before,
a:after{
    display:block;
    content:"\a0";
}
a:focus:before{
    color:blue;
    font-family:monospace;
    content:"title=\22" attr(title) "\22";
}
a:hover:before{
    color:red;
}
a:after:focus{
    color:green;
    content:"href=\22" attr(href) "\22";
}
a:after:hover{
    color:lime;
}
</style>
</head><body>

<p><a href="#nogo" title="No go!">No page jump!</a></p>

</body></html>
2 Likes

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.