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;}

并尝试将其直接添加到代码中

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

如果我编辑

的CSS

.button {}

这会修改使用按钮的所有代码，我只想编辑这个特定区域

任何帮助将不胜感激

...更新

我将CSS更改为：

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

这似乎适用于IE Edge，但在Chrome上查看时似乎没有任何作用。这有什么理由吗？

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

我建议为要调整样式的元素添加类，然后CSS直接使用该类定位元素。我的下面示例将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;
}

Answer 3

.用于选择类，#用于ID。

因此，.button会选择class="button"和#button选择任何id="button"的内容。

要选择表单中的所有按钮，如果表单中有form[type="button"]标记，则可以使用form button和button。

编辑单个区域的CSS

3 个答案: