個々のエリアのCSSを編集する

Question

<form name="Form"> 
    Value1: <input type="text" name="weight" size="10"> <br /> 
    Value2: <input type="text" name="height" size="10"> <br /> 
    <input type="button" value="Calculate" onClick="calculate()"> <br /> 
    Answer: <input type="text" name="Finalvalue" size="10"> <br /> 
    This Means: <input type="text" name="meaning" size="25"> <br /> 
    <input type="reset" value="Reset" /> 
</form> 

ボタンの色と位置をテキストの位置とともに変更することを検討していますが、何を試しても動かすことはできません。私が使って試してみました：

.form #button { 
position:xx; 
left: xx; 
color:xx;} 

をしても、私は

.button {} 

のCSSを編集する場合、これはボタンと私だけを使用するすべてのコードをammends直接コード

<input type="button" value="Calculate" onClick="calculate()" position="xx" left="xx" color="xx"><br /> 

へと付け加えてみましたこの特定の領域を編集したい

助けを借りていただければ幸いです

更新...

私はにCSSを変更：これは、IEのエッジのために働くようだが、Chromeで表示するときに何もしていないようだ

form, [type=button] { 
position: relative; 
left: 100px; 
background-color:#d52027 !important; 

。 これには何らかの理由がありますか？

Answer 1

form [type=button], { 
 
position: absolute; 
 
left: 100px; 
 
color: red; 
 
}

<form name="Form"> 
 
    Value1: <input type="text" name="weight" size="10"> <br /> 
 
    Value2: <input type="text" name="height" size="10"> <br /> 
 
    <input type="button" value="Calculate" onClick="calculate()"> <br /> 
 
    Answer: <input type="text" name="Finalvalue" size="10"> <br /> 
 
    This Means: <input type="text" name="meaning" size="25"> <br /> 
 
    <input type="reset" value="Reset" /> 
 
</form>

form [type=button] { 
position: absolute; 
left: 00px; 
color: xx; } 

これはあなたが両方のボタンをしたい場合は、このような最初の行にする を動作するはずです： form input[type=button], form input[type="reset"] {

Answer 2

.がIDSのためのクラスと#を選択するために使用されます。

ので.buttonはclass="button"で何かを選択し、#buttonはid="button"で何かを選択します。

フォーム内のすべてのボタンを選択するには、フォーム内にbuttonタグがある場合は、form[type="button"]とform buttonを使用できます。

Answer 3

スタイルを調整する要素にクラスを追加することをお勧めします。その場合、CSSはそのクラスの要素を直接ターゲットにします。以下の私の例では、私はあなたが調整するために探していると思う2つの入力にclass="adjustPosition"を追加しました：

<form name="form"> 
    Value1: <input type="text" name="weight" size="10"> <br /> 
    Value2: <input type="text" name="height" size="10"> <br /> 
    <input type="button" class="adjustPosition" value="Calculate" onClick="calculate()"> <br /> 
    Answer: <input type="text" name="Finalvalue" size="10"> <br /> 
    This Means: <input type="text" name="meaning" size="25"> <br /> 
    <input type="reset" class="adjustPosition" value="Reset" /> 
</form> 

をそれでは、あなたのCSSだけでする必要があります：

.adjustPosition { 
    position: xx; 
    left: xx; 
    color: xx; 
} 

あなたの現在のHTMLといえます（ドン場合ボタンのタイプ/リセット入力タイプを調整するためにCSSセレクタを次のように変更することができます：

form input[type="button"], form input[type="reset"] { 
    position: xx; 
    left: xx; 
    color: xx; 
}