2

I have a contact form built by wpforms plugin. There it wants me to type any class name in a blank to change anything I want. Let's say I want to change background color of the submit button

The css code I have created is 

.contactform1 button[type=submit] {
background-color: #b49543;
}

enter image description here I have this but this code won't work for some reason. Maybe it's because of priority of classes but I couldn't figure it out.

Could you please help me ? Thank you in advance!

Burak Kaymakci
  • 662
  • 2
  • 16
  • 36

3 Answers3

1

Do it the following way use :hover selector of css

.contactform1:hover {
background-color: #b49543;
}
Mandarr Sant
  • 457
  • 9
  • 22
  • Thank you, but still not working as I answered Dubliyu above. :) I'm confused haha, I am not really good at this though. – Burak Kaymakci Mar 02 '17 at 03:38
  • @PorFavorDama check weather any typo issue or have u added the css at correct place? – Mandarr Sant Mar 02 '17 at 03:42
  • Yes, I have added the css on style page and I think I am not supposed to add that css code onto wpforms plugin css page, am I? By the way I have added a screenshot, please check it . – Burak Kaymakci Mar 02 '17 at 03:44
1

Put a :hover on the button.

.contactform1 button:hover{
    background-color: #b49543;
}
Dubliyu
  • 61
  • 5
  • Thank you but it is still not working. I do not know why. Is there anyway you can take a look at it on the website to figure out what is wrong? Or I can take a screenshot and share the link on here with everyone. – Burak Kaymakci Mar 02 '17 at 03:38
1

Here's a snippet of what it looks like with the hover attribute. As you can see it doesn't affect an input button or the other button types.

.contactform1 button[type=submit]:hover {
  background-color: #b49543;
}
<div class="contactform1">
  <button type="submit">button Submit</button>
  <input type="submit" value="input Submit" />
  <button type="reset">button Reset</button>    
  <button type="button">button Button</button>
</div>

Update in response to OP: CSS follows a First in First out methodology of structuring data. So you can expect that type of flow to occur when you're dealing with your CSS. Try putting the specific CSS after everything else.

Further Updates: I took a look into your screenshot. It looks like you don't need the button type hover. just use

.contactform1:hover{
   background-color: #b49543;
}

This is because they are all a part of the same DOM element. If you try to call it by both the DOM element type and the Class, it will think that the button is inside of the .contactform1.

MrAmazing
  • 51
  • 7
  • It is a submit button, I have added a ss from the code or you can even check it on my website too if it is allowed to link it on here. Thank you for the information anyway that was helpful! – Burak Kaymakci Mar 02 '17 at 03:48
  • I've updated my answer to reflect what you need to do. You were attempting to call too many things. Just specify the .contactform1:hover property and you'll be good. You don't need to specify both .contactform1 and button[type=submit] since it's all a part of the same DOM element. – MrAmazing Mar 02 '17 at 03:52
  • Haha, okay sorry but it didn't work again. By the way should I specify these codes in my main style.css or in wpforms-full.css? Both didn't work though. Thank you for your answers! – Burak Kaymakci Mar 02 '17 at 03:59
  • I can't help you further without more code. It depends on your design pattern. If you have a call to contactform1 inside of style.css, put it there. I would also try debugging it and adding it as an element style in Chrome. and seeing what happens. Then hover over it and see if anything changes. – MrAmazing Mar 02 '17 at 04:06
  • 1
    Thank you anyways! You helped me though :) If I fix it, I will let you know. Appreciate your help! – Burak Kaymakci Mar 02 '17 at 04:12