フラットな外観の入力送信ボタンの作成方法

Question

ここで私は、ボタンを提出しています

<input type="submit" value="submit" /> 

を、私はそれフラットな外観にするためにいくつかの追加のスタイルを追加したい：

input { 
    border: 0; 
    background: none; 
    -webkit-appearance: none; 
} 

これは、それがその後どのように見えるかです：

しかし、注意深く見ても、送信ボタンの上部にある境界線...... 沈んでいる面や盛り上がった面を取り除き、平らな外観にする方法はありますか？

Answer 1

あなたがボタンの上に見られるような任意の灰色がかった外観を削除するには0/noneに境界線、ボックスシャドウと背景を設定する必要があります。丸みのあるコーナーを削除するには、border-radiusを0pxに設定します。

ルールは以下のとおりです。

input[type="submit"] 
/* Or better yet try giving an ID or class if possible*/ 
{ 
border: 0; 
background: none; 
box-shadow: none; 
border-radius: 0px; 
} 

Answer 2

ボタンの角が丸くなっています。たぶん、これはそれに影響を与える他のスタイルが原因です。このようborder-radiusを削除するようにしてください：それでも問題が解決しなかった場合は

input { 
    border: 0; 
    border-radius: 0; 
    background: none; 
    -webkit-appearance: none; 
} 

、あなたは上部の境界線を追加してどのようなスタイルをチェックする必要があります。あなたはボーダー宣言（ところでお勧めしません）とCSS !importantを使用して試すことができます：

input { 
    border: 0 !important; 
    border-radius: 0; 
    background: none; 
    -webkit-appearance: none; 
} 

Answer 3

input { 
    border: 0 none hlsa(0,0%,0%,0); 
    outline: 0 none hlsa(0,0%,0%,0); 
    box-shadow: none; 
    background: none; 
    -webkit-appearance: none; 
} 

（your'eがそれを使用するか、または別のまね枠組み場合）outlineはブートストラップで、ブラウザのデフォルト（私の知る限り）、ではないですがoutlineが、それはだにも関わらず適用されます計算されたスタイルで表示されません。私はまだそれに関する質問を探しています。 Btw、私はborder-radiusを追加しなかった。なぜなら、あなたは丸いコーナーを望むかもしれないと思っていて、それは問題ではないはずだ。

Answer 4

outline: none;が私の最初の推測になります。

そしてまた、あなたはおそらくそう

input[type="submit"]:focus { 
background:none; 
outline: none; 
border:none; 
} 


input[type="submit"]:hover { 
background: none; 
border: none; 
outline: none; 
box-shadow: none; 
} 

として:focus状態と:hover状態を削除したいと思うこれは、それが押されたときに、それはそう、それが強調アウトラインを持っていないであろうことができます。

他のスタイル（box-shadow:none;、border-radius:none;など）を削除してみてください。