# Edit form field text color

**URL:** <https://community.hubspot.com/t/edit-form-field-text-color/9227>\
**Category:** CMS Development\
**Created:** [June 22, 2018, 1:35pm UTC](https://community.hubspot.com/t/edit-form-field-text-color/9227 "2018-06-22T13:35:36Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![petras](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/petras/32/14727_2.png) [@petras](https://community.hubspot.com/u/petras)\
**Post date:** [June 22, 2018, 1:35pm UTC](https://community.hubspot.com/t/edit-form-field-text-color/9227/1 "2018-06-22T13:35:36Z")

</div>

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

![form.PNG](https://d2qpr2jzcazej7.cloudfront.net/original/3X/7/6/761387eba45f7ca5e28003647aa36dbe354700e1.png)

Thank you so much and best regards,

Petra

---

<div class="post-metadata">

**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\
**Post date:** [June 22, 2018, 2:43pm UTC](https://community.hubspot.com/t/edit-form-field-text-color/9227/2 "2018-06-22T14:43:02Z")

</div>

Drop this code in your css file:

```auto
.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](https://forms.belch.io/) 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](mailto:tim@belch.io)

---

<div class="post-metadata">

**Author:** ![petras](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/petras/32/14727_2.png) [@petras](https://community.hubspot.com/u/petras)\
**Post date:** [June 22, 2018, 2:51pm UTC](https://community.hubspot.com/t/edit-form-field-text-color/9227/3 "2018-06-22T14:51:39Z")

</div>

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](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"\>\</script](https://community.hubspot.com/)\>  
\<link rel=“stylesheet prefetch” href=“[https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css](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

---

<div class="post-metadata">

**Author:** ![tjoyce](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/tjoyce/32/88832_2.png) [@tjoyce](https://community.hubspot.com/u/tjoyce)\
**Post date:** [June 22, 2018, 3:02pm UTC](https://community.hubspot.com/t/edit-form-field-text-color/9227/4 "2018-06-22T15:02:04Z")

</div>

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

```auto
#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](mailto:tim@belch.io)

---

<div class="post-metadata">

**Author:** ![petras](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/petras/32/14727_2.png) [@petras](https://community.hubspot.com/u/petras)\
**Post date:** [June 22, 2018, 3:25pm UTC](https://community.hubspot.com/t/edit-form-field-text-color/9227/5 "2018-06-22T15:25:08Z")

</div>

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