CMS Development

RuiS
参加者

Form field highlight

解決

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


Rui

 

 

0 いいね!
1件の承認済みベストアンサー
tjoyce
解決策
名誉エキスパート | Elite Partner
名誉エキスパート | Elite Partner

Form field highlight

解決

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

<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 | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

 

Drop by and say Hi to me on slack.

元の投稿で解決策を見る

0 いいね!
6件の返信
tjoyce
名誉エキスパート | Elite Partner
名誉エキスパート | Elite Partner

Form field highlight

解決

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

0 いいね!
RuiS
参加者

Form field highlight

解決

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...

 

0 いいね!
tjoyce
名誉エキスパート | Elite Partner
名誉エキスパート | Elite Partner

Form field highlight

解決

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

<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>
0 いいね!
RuiS
参加者

Form field highlight

解決

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

0 いいね!
tjoyce
解決策
名誉エキスパート | Elite Partner
名誉エキスパート | Elite Partner

Form field highlight

解決

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

<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 | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

 

Drop by and say Hi to me on slack.

0 いいね!
RuiS
参加者

Form field highlight

解決

Perfect!

Thanks a bunch 🙂

Rui