input:hover[type="submit"]


#1

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


to_forum.gif


#2

Hi,
I found the solution which is: both styles should be placed at the “head” part of the page.
Please dont bother !
Thanks


#3
Why does "input:hover[type="submit"]" not work after I add inline style "background-color"?
Using inline styles overrides the previous rule, hence cascading style sheet.

It works the same was with more specific targeting.
[php]
input {
color: red;
}
input[type=submit] {
color: green;
}
.btn {
color: blue;
}
#input {
color: orange;
}
[/php]


#4

The way I keep CSS in my pea brain is that everything goes downhill and the last thing supersedes the last. ;D Since the submit button is 99 percent the last HTML element in a form it would make sense that the submit button hover is the last thing perform in HTML/CSS.

An example of what I’m talking about:

form#edit { background-color: #fff; padding: 10px; } form#edit label { float: left; display: block; width: 100%; max-width: 170px; height: 40px; font-family: 'Raleway', sans-serif; font-size: 1.0rem; line-height: 40px; text-align: left; background-color: #373737; color: #D9D9D9; padding: 0 7px; } form#edit input { clear: right; display: block; outline: none; border: 1px solid #000; width: 100%; max-width: 600px; font-family: Arial, Helvetica, sans-serif; font-size: 1.0rem; height: 40px; padding: 0 15px; margin-bottom: 10px; } form#edit .textareaLabel { margin: 20px; } form#edit textarea { clear: both; border: 1px solid #000; outline: none; overflow: auto; width: 100%; max-width: 600px; height: 400px; resize: none; font-family: Arial, Helvetica, sans-serif; font-size: 1.0rem; line-height: 1.5; padding: 15px; margin-bottom: 20px; } form#edit input[type=submit] { -moz-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8); -webkit-box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8); box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8); -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; border: none; outline: none; float: right; display: block; width: 100%; max-width: 100px; height: 30px; cursor: pointer; background-color: #C0B283; font-family: Arial, Helvetica, sans-serif; font-size: 1.0rem; text-transform: capitalize; color: #000; margin: 20px 0 10px; } form#edit input[type=submit]:hover { color: #ffa; background-color: #515151; }
When I stylize my HTML I start from the top of the form and work down. I try to do that with other HTML elements like the div element and etc. The only only time it gets a little tricky is when you’re making your website responsive, but for the most part it is again top to bottom with the display:none; or width: 100%; helping you out in the media queries. An the experts say that you should start with mobile and work yourself up, but I find a lot of times that is kind of hard - especially if you are developing on a PC. Anyways just my .02 cents.