更改弹出菜单按钮的颜色

Question

我是CSS的新手，所以我不知道更改弹出菜单两个按钮（提交和重置）颜色的方法。这两个选项都位于弹出菜单的末尾，但由于颜色而无法读取。我使用了browser support网站上的这段代码，这里的按钮颜色是蓝绿色，但是在我的代码中按钮和文本的颜色是白色，因此我无法读取按钮。

我尝试过更改CSS中的背景颜色，文本颜色，但是没有任何作用

this

当前图像 image

我希望按钮为蓝色

```
.gbtn{
  background: #d0d0d0;
  color: #444444;
  padding: 0 15px;
  text-transform: uppercase;
  height: 40px;
  line-height: 40px;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  font-size: 12px;
}
.gbtn.btn-estimate{
padding:0 22px;
margin-top:7px;
}
.gbtn.btn-discount{
padding:0 26px;
}
.gbtn:hover{
  background: #fbc443;
  color: #25BCE9;
}
.gbtn:hover span{
color: #25BCE9;
}
.gbtn span{
display: inline-block;
}
button{
/*   border:none;
  background: #25BCE9;
  color: #fff; 
  display: flex;
  justify-content: flex-start;*/
}

#contactForm { 
  display: none;
  z-index: 10000;
  border: 3px solid #25BCE9; 
  padding: 2em;
  width: 400px;
  text-align: center;
  background: #fff;
  position: fixed;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%)
}

input{ 
  height: 40px;
  margin: .8em auto;
  font-family: inherit; 
  text-transform: inherit; 
  font-size: inherit;
  display: block; 
  width: 280px; 
  padding: .4em;
}
textarea { 
  height: 80px;
  width:337px;
  margin-right: 5px;
  margin-bottom: 5px;
  font-family: inherit; 
  text-transform: inherit; 
  font-size: inherit;
  display: block; 
  padding: .4em;
  resize: none;}

.formBtn {
  display: inline-block;
  background: teal;
  color: #fff;
  width: 140px;
  font-weight: 100;
  font-size: 1.2em;
  padding: 5px 0;
  border: none;
}

<div class="block-currency">
<div class="gbtn btn-estimate">
	<div id="contact">Get Quote</div>
</div>
<div id="contactForm">
<h1>Keep in touch!</h1>
<small>We'll get back to you as quickly as possible</small>					  
<form action="#">
	<input placeholder="Name" type="text" required />
	<input placeholder="Email" type="email" required />
	<input placeholder="Subject" type="text" required />
	<textarea placeholder="Comment"></textarea>
	<input class="formBtn"  type="submit" />
	<input class="formBtn" type="reset" />
 </form>
 </div>
</div>

Block Currency Code

.block-currency{
position:relative;
float:right;
cursor:pointer;
line-height:50px;
height:50px; 
}
.block-currency:hover ul{
visibility:visible;
top:50px; 
opacity:1;
transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;

}

```

Answer 1

最快，最简单的方法是将ID添加到输入元素：

#submitButton {
  background: blue;
}
#resetButton {
  background: blue;
}

并通过直接定位来更改其颜色：

class Profile(models.Model):
    user = models.OneToOneField(User, on_delete=models.CASCADE)
    stream_name = models.CharField(max_length=30, blank=True)

Answer 2

.gbtn{
  background: #d0d0d0;
  color: #444444;
  padding: 0 15px;
  text-transform: uppercase;
  height: 40px;
  line-height: 40px;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  font-size: 12px;
}
.gbtn.btn-estimate{
padding:0 22px;
margin-top:7px;
}
.gbtn.btn-discount{
padding:0 26px;
}
.gbtn:hover{
  background: #fbc443;
  color: #25BCE9;
}
.gbtn:hover span{
color: #25BCE9;
}
.gbtn span{
display: inline-block;
}
button{
/*   border:none;
  background: #25BCE9;
  color: #fff; 
  display: flex;
  justify-content: flex-start;*/
}

#contactForm { 
  z-index: 10000;
  border: 3px solid #25BCE9; 
  padding: 2em;
  width: 400px;
  text-align: center;
  background: #fff;
  position: relative;
  top:0%;
  left:0%;
}

input{ 
  height: 40px;
  margin: .8em auto;
  font-family: inherit; 
  text-transform: inherit; 
  font-size: inherit;
  display: block; 
  width: 280px; 
  padding: .4em;
}
textarea { 
  height: 80px;
  width:337px;
  margin-right: 5px;
  margin-bottom: 5px;
  font-family: inherit; 
  text-transform: inherit; 
  font-size: inherit;
  display: block; 
  padding: .4em;
  resize: none;}

.formBtn {
  display: inline-block;
  background: teal;
  color: #fff;
  width: 140px;
  font-weight: 100;
  font-size: 1.2em;
  padding: 5px 0;
  border: none;
}

<div class="block-currency">
<div class="gbtn btn-estimate">
	<div id="contact">Get Quote</div>
</div>
<div id="contactForm">
<h1>Keep in touch!</h1>
<small>We'll get back to you as quickly as possible</small>					  
<form action="#">
	<input placeholder="Name" type="text" required />
	<input placeholder="Email" type="email" required />
	<input placeholder="Subject" type="text" required />
	<textarea placeholder="Comment"></textarea>
	<input class="formBtn"  type="submit" />
	<input class="formBtn" type="reset" />
 </form>
 </div>
</div>