wordpress jetpack unwanted border in bootstrap email input

Question

I'm using the subscription form from Jetpack in Wordpress. I've Boostrappified the jetpack form as best I can with custom js, but can't seem to get rid of a pesky border - inside - the border provided by Bootstrap. The same thing appears on Chrome, Firefox and Safari (MacOSX) as well as iOS. How to get rid of this darn inner border?

Page illustrating the problem!

<div id="blog_subscription-2" class="widget widget_blog_subscription jetpack_subscription_widget">
    <h3 class="sidebar_title"></h3>
    <form action="#" method="post" accept-charset="utf-8" id="subscribe-blog-blog_subscription-2" class="input-group mb-3">
        <div id="subscribe-email" class="form-control">
            <label id="jetpack-subscribe-label" class="screen-reader-text" for="subscribe-field-blog_subscription-2">Email Address</label>
            <input type="email" name="email" required="required" class="required" value="" id="subscribe-field-blog_subscription-2" placeholder="Email Address">
        </div>
        <div id="subscribe-submit" class="input-group-append">
            <input type="hidden" name="action" value="subscribe">
            <input type="hidden" name="source" value="https://gurueap.com/reconstructing-trends/">
            <input type="hidden" name="sub-type" value="widget">
            <input type="hidden" name="redirect_fragment" value="blog_subscription-2">
            <input type="hidden" id="_wpnonce" name="_wpnonce" value="3f90b6cdaf">
            <button type="submit" name="jetpack_subscriptions_widget" class="btn btn-primary">Subscribe</button>
        </div>
    </form>
</div>

can you please create a snippet or fiddle for your code? – KuldipKoradia Jan 11 '20 at 06:01 — KuldipKoradia, Jan 11 '20 at 06:01

score 1 · Accepted Answer · answered Jan 11 '20 at 06:09

1

It can be resolved using below style

#subscribe-email input
{
    border: none !important;
}

answered Jan 11 '20 at 06:09

Neal Developer

569
1
4
13

add in customize css it will work Check screenshot : https://www.screencast.com/t/HQMks9gwYtA – Neal Developer Jan 11 '20 at 06:59
Ya I did the same through a 'Wordpress-enqueued' css file. Now working. It seems Wordpress wasn't happy that during development I wasn't using the enqueued file. Let that be a lesson to me and everyone else, I guess! – Steve Bolton Jan 11 '20 at 07:28

score -1 · Answer 2 · answered Jan 11 '20 at 06:10

#subscribe-email input {
    background: #f7f7f7;
    background-image: -webkit-linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
    border: 1px solid #d1d1d100;
    border-radius: 1px;
    color: #686868;
    padding: 5px;
}
#subscribe-email{
    padding: 0px;
}

Above css is tested and worked

wordpress jetpack unwanted border in bootstrap email input

2 Answers2