スタイルINPUT要素のCSS

Question

私は、画像の下のように入力されたテキストやボタンをスタイリングしようとしています：

私はthisのように結ばれました。
出力は画像と同じではありません。私はCSSを初めて使っています。
私のコードを修正するのを助けてくれませんか？

Answer 1

を変えるあなたは

example jsfiddle

body {background-color:#636363;} 

input[type=text] 
{ 
    background-color: #BFBDBD; 
    border:solid 1px #BFBDBD; 
    color: #979797; 
    height: 28px; 
    padding-left:10px; 
    width: 191px; 
    box-shadow: 2px 2px 0 #828181 inset; 
} 
input[type=button] 
{ 
    background-color: #1E1E1E; 
    color: #979797; 
    height: 24px; 
    width: 103px; 
    color: #bbbbbb; 
    text-transform:uppercase; 
    box-shadow:-1px 2px #6E6B6A inset; 
} 

input[type=button], input[type=text] 
{ 
    border: 0; 
    border-radius:5px; 
    font-family: Sansation,Arial; 
} 

Answer 2

inputの代わりにinpurと最後のセレクタに間違いがあります。

また、入力と呼ばれるクラスがなく、実際には要素自体をターゲットにしています。変更.input〜input

丸みを帯びたコーナー効果を得るには、ボーダー半径を追加します。あなたの最後のCSSの宣言は、上記で次のようになります

input[type=button], input[type=text] 
{ 
    border-radius: 5px; 
    font-family: Sansation; 
}