Question

我正在创建一个没有js的网页，除了灰色输入/提交框之外，我拥有的llok非常完美，我尝试了各种带有按钮代码的选项，但无法将它们变成黑色或蓝色，甚至透明的，有可能吗？如果是，怎么办？有人请帮助

.input { 
  background-color: transparent; 
  background: #7ec2cf; 
  color: #eaed5e; 
  font-size: 15px; 
  line-height: 15px; 
  padding: 3px; 
  border-radius: 2px; 
  font-family: Georgia, serif; 
  font-weight: bold; 
  text-decoration: none; 
  font-style: normal; 
  font-variant: small-caps; 
  text-transform: none; 
  border-color: #7ec2cf; 
  border-style: #7ec2cf 2px; 
  display: inline-block; 
} 

.input:hover { 
  background: #eaed5e; 
  color: #7ec2cf
} 

.input:active { 
  background: #7ec2cf; 
  color: #eaed5e
}

<div class="input">
  <input value="Logout" type="submit">
</div>

<input name="a" value="lo" type="hidden">
<input name="s" value="0oiRYW3Nvf0YC1Fk" type="hidden">

Answer 1

html：

<form method="post">
<div>
<input value="Logout" type="button" class="press">
</div>
<input name="a" value="lo" type="hidden">
<input name="s" value="0oiRYW3Nvf0YC1Fk" type="hidden">
</form>

css：

.press {
   background-color: blue;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.input:hover { background: #eaed5e; color: #7ec2cf} .input:active { background: #7ec2cf; color: #eaed5e }

这是您想要的吗？

Answer 2

css的问题是您正在使用的选择器-.input代表类名输入，对于选择按钮，请使用-

.input input{
//your code here for the button
}

或

.input>input{
//your code here for the button
}

或者只是

input {
//your code here for the button
}

Answer 3

看下面的例子。只需删除div并将.input类应用于input元素即可。另外请注意，background-color在这种情况下是多余的。

.input { 
  background: #7ec2cf; 
  color: #eaed5e; 
  font-size: 15px; 
  line-height: 15px; 
  padding: 3px; 
  border-radius: 2px; 
  font-family: Georgia, serif; 
  font-weight: bold; 
  text-decoration: none; 
  font-style: normal; 
  font-variant: small-caps; 
  text-transform: none; 
  border-color: #7ec2cf; 
  border-style: #7ec2cf 2px; 
  display: inline-block; 
} 

.input:hover { 
  background: #eaed5e; 
  color: #7ec2cf
} 

.input:active { 
  background: #7ec2cf; 
  color: #eaed5e
}

<input value="Logout" type="submit" class="input">

<input name="a" value="lo" type="hidden">
<input name="s" value="0oiRYW3Nvf0YC1Fk" type="hidden">

我想将输入按钮从灰色变成黑色

3 个答案: