输入旁边的自定义按钮与BS3无法正确改变边框颜色

Question

我在输入旁边有一个自定义按钮，但没有按预期运行。基本上，当我使用rgba时，它会使用较暗的提示创建重叠边框。它添加的阴影似乎发生在最新版本的BS而不是3.0.0。

HTML

<div class="row">
    <div class="col-lg-12 newsletter">
        <form method="post" action='/' class="form" id="newsletter-form">
            <div class="form-group" id="newsletter-form-group">
                <div class="controls">
                    <div class="input-group">
                        <input type="text" class="form-control newsletter-input" name="testInput" placeholder="Your email address here.." />    
                        <span class="input-group-btn">
                            <button class="btn btn-default newsletter-btn" type="submit">Sign up</button>
                        </span>
                    </div>
                </div>
                <label class="control-label newsletter-status" for="testInput"></label>
            </div>
        </form>
    </div>
</div>

CSS

/ *最新编译和缩小的CSS包含在外部资源* /

中

 body {
    margin: 10px;
    background-color:#404040;
}
.btn:focus, .btn:active, .btn.active {
    outline: 0!important;
}
.newsletter-btn, .newsletter-btn:focus, .newsletter-btn:active, .newsletter-btn.active {
    color:#fff;
    background-color: rgba(52, 152, 219, 1.0) !important;
    border: 1px solid rgba(52, 152, 219, 1.0) !important;
    font-weight:500;
    border-radius:0!important;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    transition: all .3s;
}
.newsletter-btn:hover {
    background-color: rgba(52, 152, 219, 0.5) !important;
    border: 1px solid rgba(52, 152, 219, 0.5) !important;
    color:#fff!important;
    box-shadow: none!important;
    -webkit-box-shadow: none!important;
    -moz-box-shadow: none!important;
}
.newsletter input {
    box-shadow:none!important;
    border-color:#fff!important;
    background-color: #fff;
    color:#fff;
    border-radius:0!important;
}

DEMO：https://jsfiddle.net/DTcHh/7138/