Edit form field text color

[petras]

Hi everybody, hope you may help.

Would like to edit the text color of all the form fields of a form via CSS in the HTML header. Does anybody know which code to use? 

something like .hs-form form fields {color: #ccc}

The background of the field is white, the text should be in a dark color 

 

Thank you so much and best regards,

Petra

[tjoyce]

Drop this code in your css file:

.hs-form input[type=date], .hs-form input[type=datetime], .hs-form input[type=datetime-local], .hs-form input[type=email], .hs-form input[type=month], input[type=number], .hs-form input[type=password], .hs-form input[type=range], .hs-form input[type=search], .hs-form input[type=tel], .hs-form input[type=text], .hs-form input[type=time], .hs-form input[type=url], .hs-form input[type=week], .hs-form .input textarea, .hs-form .hs-input textarea,.hs-form textarea, .hs-form .input select, .hs-form .hs-input select, .hs-form select {
    color: #ff007a !important;
}

We made this tool just for these purposes, if you ever need to quickly style a form or check out the css that controls the form.

---

tim@belch.io

[petras]

Thanks very much for your answer. I added your code but when I check I see that it does not work. Please check: http://sites.miceportal.com/demo-mice-portal-plattform

Send my header code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></scrip...>
<link rel="stylesheet prefetch" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css">

<script>
$(document).ready(function(){

    $('.open-popup-link').magnificPopup({
        type:'inline',
      
        midClick: true
    });
});

</script>

<style>
.mfp-container {
  width: 50%;
  position: static;
  margin: auto;
  padding: 200px 0px 0px 0px;
  }
 
 

.hs-form input[type=date], .hs-form input[type=datetime], .hs-form input[type=datetime-local], .hs-form input[type=email], .hs-form input[type=month], input[type=number], .hs-form input[type=password], .hs-form input[type=range], .hs-form input[type=search], .hs-form input[type=tel], .hs-form input[type=text], .hs-form input[type=time], .hs-form input[type=url], .hs-form input[type=week], .hs-form .input textarea, .hs-form .hs-input textarea,.hs-form textarea, .hs-form .input select, .hs-form .hs-input select, .hs-form select
  {
    color: #ff007a !important;
  }

</style>

Thanks so much for checking

[tjoyce · Accepted solution]

I see, try the following code. Your css file has a deeper nesting overriding the form styles, so this code should work.

#demo-popup .hs-form input[type=date], #demo-popup .hs-form input[type=datetime], #demo-popup .hs-form input[type=datetime-local], #demo-popup .hs-form input[type=email], #demo-popup .hs-form input[type=month], input[type=number], #demo-popup .hs-form input[type=password], #demo-popup .hs-form input[type=range], #demo-popup .hs-form input[type=search], #demo-popup .hs-form input[type=tel], #demo-popup .hs-form input[type=text], #demo-popup .hs-form input[type=time], #demo-popup .hs-form input[type=url], #demo-popup .hs-form input[type=week], #demo-popup .hs-form .input textarea, #demo-popup .hs-form .hs-input textarea,#demo-popup .hs-form textarea, #demo-popup .hs-form .input select, #demo-popup .hs-form .hs-input select, #demo-popup .hs-form select {
    color: #ff007a !important;
}

If these answers help, if you wouldn't mind marking them as solved, that would be awesome!

---

tim@belch.io

[petras]

Hello, see what was missing. Thanks for your great indication!