ブートストラップ形式の入力端が四角形から角形に変わることはありません

Question

私はフォームの四角形をブートストラップではなく正方形にしたいのですが、運がないとしています。ボタンのCSSは機能しましたが、入力フォームは丸められています。私はここで間違って何をしていますか？

<form class="navbar-form pull-right"> 

        <div class="form-group form-group-sm"> 

        <input type="email" class="form-control input" id="email" name="email" placeholder="jane.doe@example.com"> 
        </div> 

        <input type="submit" class="btn btn-sm" name="submit" value="Submit" id="submit"/> 
        </div> 

       </form> 

CSS

.form-control { 
border-radius: 0; 
} 

Answer 1

あなたのCSSルールでは、ブートストラップCSSを無効にするには十分ではありません。代わりに、ちょうど使用：

#email { 
    border-radius: 0; 
} 

bootply example

が見る、CSSの特異性の詳細についてはhttps://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Answer 2

これは何をされ

.form-control{ 
    -webkit-border-radius: 0; 
    -moz-border-radius: 0; 
      border-radius: 0; 
} 

Answer 3

.FORM-コントロールのプロパティを変更してみてくださいIそれらを正方形にしました。

<input type="email" style="border-radius: 0 !important" class="form-control input" id="email" name="email" placeholder="jane.doe@example.com"> 

Answer 4

.form-group-sm .form-control { 
     border-radius: 0; 
} 

それは.form-group-sm .form-control { }が境界半径を削除、変更、特異性の問題のように思えます。

Answer 5

最も単純な方法は、ブートストラップ・ボーダー・ユーティリティrounded-0

https://v4-alpha.getbootstrap.com/utilities/borders/あなたは、インラインスタイリングと `！important`可能な限りの両方を使用しないでください

<input type="email" class="form-control input rounded-0" id="email" name="email" placeholder="jane.doe@example.com">