Author Topic: input:hover[type="submit"]  (Read 274 times)

Baby_Bean

  • Regular Member
  • **
  • Posts: 40
  • Karma: 0
    • View Profile
Hi everyone,
This is my code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  <!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: [Select]
1
2
 <input type="submit"  name = "myInput" style = "background-color: blue">
 
the whole code looks like this:
Code: [Select]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  <!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

PHP Help Forum

input:hover[type="submit"]
« on: April 20, 2017, 10:11:29 am »



PHP Help Forum

Re: input:hover[type="submit"]
« Reply #1 on: April 20, 2017, 11:22:15 am »


astonecipher

  • Software Engineer
  • Professional PHP Helper
  • Senior Member
  • *
  • Posts: 2435
  • Karma: 95
    • View Profile
Quote
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
  
  input 
{
      
colorred;
  }
  
input[type=submit] {
      
colorgreen;
  }
  .
btn {
      
colorblue;
 }
 
#input {
     
colororange;
 }
 <
input type="submit" class='btn' id="input"  name "myInput" >


Questions? Go here first.
http://www.phptherightway.com/

PHP Help Forum

Re: input:hover[type="submit"]
« Reply #2 on: April 21, 2017, 09:36:48 am »


Strider64

  • Professional PHP Helper
  • Senior Member
  • *
  • Posts: 914
  • Karma: 75
  • Don't Use mysql....use mysqli or PDO!
    • View Profile
    • Pepster's Place
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
    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.
« Last Edit: April 24, 2017, 06:29:42 pm by Strider64 »
Insanity: doing the same thing over and over again and expecting different results -> https://www.pepster.com

PHP Help Forum

Re: input:hover[type="submit"]
« Reply #3 on: April 24, 2017, 06:26:11 pm »