Question

我有这个并且input type="submit"或"button"需要相同的样式。可能吗？如果是这样，怎么样？

提前致谢

a.dlbtn {
  display: inline-block;
  position: relative;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  padding: 0 20px;
  font-size: 12px;
  font-weight: bold;
  color: #dfdfdf;
  background-color: #4b4b4b;
 
}
a.dlbtn:hover,
a.dlbtn:focus {
  color: #fff;
  padding-right: 90px;
  background-color: #5381bf;
  border-color: #5381bf;
}

<a href="" class="dlbtn">Descarga<span class="details">.iso<span class="size">2.9 gb</span></span></a>

Answer 1

按钮并提交class="dlbtn"：

<input type="submit" class="dlbtn">

按钮

<button name="xxxx" class="dlbtn">

Answer 2

想象一下带有dlbtn类的按钮和输入元素：

<input class="dlbtn" type="submit" value="Submit">
<button class="dlbtn" type="submit">Submit</button>

目前，您的dlbtn课程仅限于a个标签（即使在上述元素上设置了课程时，也不会应用此课程）：

a.dlbtn {[...]}
a.dlbtn:hover {[...]}
a.dlbtn:focus {[...]}

您可以向css选择器添加其他html标记，允许类声明应用于a，input和button html标记，并设置dlbtn类：

a.dlbtn, input.dlbtn, button.dlbtn {[...]}
a.dlbtn:hover, input.dlbtn:hover, button.dlbtn:hover {[...]}
a.dlbtn:focus, input.dlbtn:focus, button.dlbtn:focus {[...]}

或者您可以删除html标记限制并将该类应用于具有'dlbtn'类的任何html元素（如<div class="dlbtn">[...]</div>）：

.dlbtn {[...]}
.dlbtn:hover {[...]}
.dlbtn:focus {[...]}

为了提醒您，input和button都带有浏览器提供的标准样式。您可能会在StackOverflow上找到另一个答案，它将说明覆盖标准样式的方法（例如使用-webkit-appearance:none处理Chrome的某些输入元素的自动样式）。

修改：更新了<button>类型，以便为每个Leo Farmer阅读“提交”。

如何制作输入类型=＆＃34;提交＆＃34;来自href？

2 个答案: