bootstrap 电子邮件输入中的 wordpress jetpack 不需要的边框

Question

我在 Wordpress 中使用来自 Jetpack 的订阅表单。我已经使用自定义 js 尽我所能地对 jetpack 表单进行了 Boostrappified，但似乎无法摆脱讨厌的边框 - 内部 - Bootstrap 提供的边框。同样的事情出现在 Chrome、Firefox 和 Safari (MacOSX) 以及 iOS 上。如何摆脱这个该死的内部边界？

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>

Answer 1

可以通过以下方式解决

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

Answer 2

#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;
}

以上css已经过测试和工作

bootstrap 电子邮件输入中的 wordpress jetpack 不需要的边框

wordpress jetpack unwanted border in bootstrap email input

javascript

css

wordpress

jetpack

bootstrap-4