我是 css 的新手,所以我不知道如何更改弹出菜单两个按钮(提交和重置)的颜色。这两个都位于弹出菜单的末尾,但由于颜色原因无法阅读。我使用了来自 this 的代码网站和此处按钮的颜色是蓝绿色,但在我的代码中,按钮和文本颜色是白色,因此我无法阅读按钮。
我试过在 css 中更改背景颜色、文本颜色但没有任何效果
当前图片 Current 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;
}
```
最佳答案
.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>
关于html - 更改弹出菜单按钮的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55832433/