如何解决这些按钮上的HTML似乎无法更改文本颜色
以下是我正在使用的代码。我希望两个按钮都为白色,但似乎无法正常工作。我正在自定义wordpress上的Bloom(通过divi)弹出窗口。
<div>
<style>
.btn-group button {
background-color: #4CAF50;
border: 1px solid green;
color: #FFFFFF;
cursor: pointer;
float: left; }
</style>
<body>
<div class="btn-group" style="width:100%">
<button style="width:50%"><a href="----">In-Store Visit</a></button>
<button style="width:50%"><a href="-----">Eye-Exam</a></button>
</div>
</div>
</body>
</div>
解决方法
这是一个链接,位于中,
a{color: #FFFFFF;}
/* Bloom */
a:hover,a:active{color: #FFFFFF;text-shadow: 0 0 4px #FFFFFF;}
,
这里的问题是,<a>
中有一个<button>
元素,这些元素在每个浏览器中都有默认颜色(这就是您现在得到的蓝色)。
您需要有一条规则告诉<a>
将颜色更改为所需的颜色:
.btn-group a {
color: #FFFFFF;
}
请记住,您需要为:hover,:active,:visited等添加颜色。
不相关,但很重要:<a>
中<button>
的这种模式不是很语义,在Firefox(Nesting <a> inside <button> doesn't work in Firefox)中将不起作用
我会将代码更改为以下内容:
<div>
<style>
.btn-group a {
background-color: #4CAF50;
border: 1px solid green;
color: #FFFFFF;
cursor: pointer;
float: left;
text-align: center;
box-sizing: border-box;
}
</style>
<body>
<div class="btn-group" style="width:100%">
<a style="width:50%" href="----">In-Store Visit</a>
<a style="width:50%" href="----">Eye-Exam</a>
</div>
</div>
</body>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。