Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

input:hover[type="submit"] 1

Status
Not open for further replies.
lupidol

lupidol

Programmer
Apr 23, 2008
125
IL
Hi everyone,
This is my code:
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:
Code: 
<input type="submit"  name = "myInput" style = "background-color: blue">
the whole code looks like this:
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" 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_odubv4.gif
 
Sort by date Sort by votes
Because the inline style overrides the styles in the head.

Basically the inline style is more specific than the style above which means its the one that gets applied to the element. And since the inline style has no state defintition, it applies to all states of the element, including "hover".

A bit about CSS style specificity:

If you want to keep the hover, don't add an inline style that overrides the same attribute.

Add the style to the head hcss. If you need to apply a different color to a different input use classes.


Code: 
!DOCTYPE html>
<html lang = "en">
<head>
	<title>test</title>
	<style>
		input[type="submit"].bluebtn 
		{
			background-color:blue;
		}
		
		input[type="submit"].greenbtn 
		{
			background-color:green;
		}
		
		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" class="bluebtn">
		<input type="submit"  name = "myInput" class="greenbtn">											
	</form>
</body>
</html>


----------------------------------
Phil AKA Vacunita
----------------------------------
OS-ception: Running Linux on a Virtual Machine in Windows which itself is running in a Virtual Machine on Mac OSx.

Web & Tech
 
Upvote 0 Downvote
Thanks a lot Vacunita. This was very helpful !
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

pendle666
  • Locked
  • Question
Inserting same line of text of every web page - &quot;link&quot; insert? 1
Replies
6
Views
143
ChrisHirst
ChrisHirst
audiopro
  • Locked
  • Question
input type='file' 2
Replies
12
Views
138
audiopro
audiopro
kjv1611
  • Locked
  • Question
How Can I Know This Site Doesn't &quot;Phone Home&quot;? 2
Replies
9
Views
120
spamjim
spamjim
lupidol
  • Locked
  • Question
An element (div) enclosed by &quot;border&quot; 1
Replies
3
Views
100
vacunita
vacunita
jjack46
  • Locked
  • Question
Using more than one submit button
Replies
3
Views
116
jjack46
jjack46

Part and Inventory Search

Sponsor

Back
Top