有没有办法让文本框看起来与我的输入字段不同

Question

我制作了一个简单的网站，它接受两个参数并给出第三个参数的输出。为了设置输入样式，我在文本输入上使用了输入样式。但是，我的结果也在文本字段中，看起来与输入完全相同（对于 html 来说就是）。我认为有更好的方法。这是我的文本字段

<label for "messageBox"> Message: </label>
<input type="text" id="messageBox" placeholder="This is the message">
<br>
<label for "keyBox"> Key: </label>
<input type="number" id="keyBox" placeholder="This is the key">
<br>
<input type="submit" value = "Encrypt" id="encrypt" >
<input type="submit" value = "Decrypt" id="decrypt" >

<br>
<input type="text" id="resultBox" placeholder="Lambda result will appear here" readonly>

CSS 是：

input {
        padding: 10px;
        width: 800px;
        margin: 10px;
    }

Answer 1

您可以使用 class="styled-input" 添加到输入的类列表，然后为 .styled-input 类添加其他 css

input {
  padding: 10px;
  width: 800px;
  margin: 10px;
}

.styled-input {
  background-color: red;
}

<label for "messageBox"> Message: </label>
<input type="text" id="messageBox" placeholder="This is the message">
<br>
<label for "keyBox"> Key: </label>
<input type="number" id="keyBox" placeholder="This is the key">
<br>
<input type="submit" value = "Encrypt" id="encrypt" >
<input type="submit" value = "Decrypt" id="decrypt" >

<br>
<input type="text" class="styled-input" id="resultBox" placeholder="Lambda result will appear here" readonly>