# Form field highlight

**URL:** <https://community.hubspot.com/t/form-field-highlight/10088>\
**Category:** CMS Development\
**Created:** [September 6, 2018, 2:50pm UTC](https://community.hubspot.com/t/form-field-highlight/10088 "2018-09-06T14:50:39Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![RuiS](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ruis/32/47408_2.png) [@RuiS](https://community.hubspot.com/u/RuiS)\
**Post date:** [September 6, 2018, 2:50pm UTC](https://community.hubspot.com/t/form-field-highlight/10088/1 "2018-09-06T14:50:39Z")

</div>

Hi all,  
I’d like to accomplish a similar look to the one on the form below (see attached screenshot). Basically, I want my form **fields** to **highlight** when selected.  
Hope you can help. Thanks!

 ![form-field-highlight.JPG](https://d2qpr2jzcazej7.cloudfront.net/original/2X/5/5f4a44382f01ac8415473aa673b76cf1683d8d32.jpeg)

Rui

---

<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:** [September 6, 2018, 3:48pm UTC](https://community.hubspot.com/t/form-field-highlight/10088/2 "2018-09-06T15:48:50Z")

</div>

@RuiS - we need a preview link to a page with one of your forms in it. Then we will give you some code.

---

<div class="post-metadata">

**Author:** ![RuiS](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ruis/32/47408_2.png) [@RuiS](https://community.hubspot.com/u/RuiS)\
**Post date:** [September 6, 2018, 3:53pm UTC](https://community.hubspot.com/t/form-field-highlight/10088/3 "2018-09-06T15:53:01Z")

</div>

Thanks for the quick response @tjoyce!  
Here’s one of the forms I’d like to format: [https://inbound.papersoft-dms.com/ebook-papersoft-paper-at-the-gates-driving-digital-revolution-with-modern-data-capture](https://inbound.papersoft-dms.com/ebook-papersoft-paper-at-the-gates-driving-digital-revolution-with-modern-data-capture)

---

<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:** [September 6, 2018, 4:00pm UTC](https://community.hubspot.com/t/form-field-highlight/10088/4 "2018-09-06T16:00:42Z")

</div>

thanks @RuiS - Can you please try the following styles:

```auto
<style>
.af-ebook-hero .form-container .hs-form input[type="password"], .af-ebook-hero .form-container .hs-form input[type="text"]:hover, .af-ebook-hero .form-container .hs-form input[type="password"], .af-ebook-hero .form-container .hs-form input[type="email"]:hover {
 border-color: #00ffff;
 box-shadow: 0px 0px 6px rgb(0, 159, 167);
}
</style>

```

---

<div class="post-metadata">

**Author:** ![RuiS](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ruis/32/47408_2.png) [@RuiS](https://community.hubspot.com/u/RuiS)\
**Post date:** [September 6, 2018, 4:19pm UTC](https://community.hubspot.com/t/form-field-highlight/10088/5 "2018-09-06T16:19:14Z")

</div>

Thanks, @tjoyce!

That works really well!  
Just one thing: instead of having the highlight work on hover can we have it when the cursor is in the field? As long as the cursor is inside the field it should remain highlighted.

Thanks for your help,

Rui

---

<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:** [September 6, 2018, 4:40pm UTC](https://community.hubspot.com/t/form-field-highlight/10088/6 "2018-09-06T16:40:35Z")

</div>

@RuiS - sorry, that’s what i meant to do - here’s the new code :

```auto
<style>
.af-ebook-hero .form-container .hs-form input[type="password"], .af-ebook-hero .form-container .hs-form input[type="text"]:focus, .af-ebook-hero .form-container .hs-form input[type="password"], .af-ebook-hero .form-container .hs-form input[type="email"]:focus {
 border-color: #00ffff;
 box-shadow: 0px 0px 6px rgb(0, 159, 167);
}
</style>

```

* * *

If this answer helped, please, mark as solved 😄

* * *

[tim@belch.io](mailto:tim@belch.io) | [forms.belch.io](https://forms.belch.io) | Design your own Beautiful HubSpot Forms; No coding necessary.

Drop by and say Hi to me [on slack](http://slack.belch.io/).

---

<div class="post-metadata">

**Author:** ![RuiS](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/ruis/32/47408_2.png) [@RuiS](https://community.hubspot.com/u/RuiS)\
**Post date:** [September 6, 2018, 4:50pm UTC](https://community.hubspot.com/t/form-field-highlight/10088/7 "2018-09-06T16:50:31Z")

</div>

Perfect!  
Thanks a bunch 🙂  
Rui