Black shadow around text field - where is this styled in the CSS!?

SOLVE
jly
Occasional Contributor

Hey community, 

 

I'm having an issue with my forms—I've tried to find the root cause but am unable to. Seems like it should've been really easy!

 

When I click on a box (in the example below, I've clicked on the comment box), there's a very prominent black shadow around it. I can't find where this is coming from, is someone able to spot it in the CSS?

 

Screen Shot 2018-11-20 at 10.45.04 AM.png

 

The form lives on all our pages, but here's one example you can inspect:

https://www.jibestream.com/use-cases/intelligent-security

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
Highlighted
Regular Advisor | Gold Partner | HubSpot Certified Trainer

@jly - 

It's coming from this css file https://www.jibestream.com/hs-fs/hub/416769/hub_generated/template_assets/1542748645118/custom/page/... on line 3477

you can override it with the following css: 

body .hs-form input[type="text"]:focus,
body .hs-form input[type="password"]:focus,
body .hs-form input[type="datetime"]:focus,
body .hs-form input[type="datetime-local"]:focus,
body .hs-form input[type="date"]:focus,
body .hs-form input[type="month"]:focus,
body .hs-form input[type="time"]:focus,
body .hs-form input[type="week"]:focus,
body .hs-form input[type="number"]:focus,
body .hs-form input[type="email"]:focus,
body .hs-form input[type="url"]:focus,
body .hs-form input[type="search"]:focus,
body .hs-form input[type="tel"]:focus,
body .hs-form input[type="color"]:focus,
body .hs-form input[type="file"]:focus,
body .hs-form textarea:focus,
body .hs-form select:focus {
    outline: 0;
    border-color: #34495e;
    border-width:0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0),0 0 8px rgba(0,0,0,0);
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0),0 0 8px rgba(0,0,0,0);
    -o-box-shadow: inset 0 1px 1px rgba(0,0,0,0),0 0 8px rgba(0,0,0,0);
    -ms-box-shadow: inset 0 1px 1px rgba(0,0,0,0),0 0 8px rgba(0,0,0,0);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0),0 0 8px rgba(0,0,0,0);
}

If this answer helped, please, mark as solved Smiley Very Happy


tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

 

Drop by and say Hi to me on slack.

2 Replies
Highlighted
Regular Advisor | Gold Partner | HubSpot Certified Trainer

@jly - 

It's coming from this css file https://www.jibestream.com/hs-fs/hub/416769/hub_generated/template_assets/1542748645118/custom/page/... on line 3477

you can override it with the following css: 

body .hs-form input[type="text"]:focus,
body .hs-form input[type="password"]:focus,
body .hs-form input[type="datetime"]:focus,
body .hs-form input[type="datetime-local"]:focus,
body .hs-form input[type="date"]:focus,
body .hs-form input[type="month"]:focus,
body .hs-form input[type="time"]:focus,
body .hs-form input[type="week"]:focus,
body .hs-form input[type="number"]:focus,
body .hs-form input[type="email"]:focus,
body .hs-form input[type="url"]:focus,
body .hs-form input[type="search"]:focus,
body .hs-form input[type="tel"]:focus,
body .hs-form input[type="color"]:focus,
body .hs-form input[type="file"]:focus,
body .hs-form textarea:focus,
body .hs-form select:focus {
    outline: 0;
    border-color: #34495e;
    border-width:0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0),0 0 8px rgba(0,0,0,0);
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0),0 0 8px rgba(0,0,0,0);
    -o-box-shadow: inset 0 1px 1px rgba(0,0,0,0),0 0 8px rgba(0,0,0,0);
    -ms-box-shadow: inset 0 1px 1px rgba(0,0,0,0),0 0 8px rgba(0,0,0,0);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0),0 0 8px rgba(0,0,0,0);
}

If this answer helped, please, mark as solved Smiley Very Happy


tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

 

Drop by and say Hi to me on slack.

jly
Occasional Contributor

Didn't completely take away the shadow as it looks like there's still something else determining a shadow, but this will do for now!

 

Thank you!

 

Screen Shot 2018-11-21 at 8.53.00 AM.png

Reply
0 Upvotes