CMS Development

jly
Participant

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

SOLVE

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

0 Upvotes
1 Accepted solution
tjoyce
Solution
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

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

SOLVE

@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 😄


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

 

Drop by and say Hi to me on slack.

View solution in original post

2 Replies 2
tjoyce
Solution
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

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

SOLVE

@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 😄


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
Participant

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

SOLVE

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

0 Upvotes