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
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.
Thanks very much for your answer. I added your code but when I check I see that it does not work. Please check: MICE-Buchungsplattform für digitalen Veranstaltungseinkauf
Send my header code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
<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
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!
Hello, see what was missing. Thanks for your great indication!