html - 如何从 href 生成输入类型 ="submit"？

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

想象一个带有 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带有 dlbtn 的 html 标签类集:

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 的“提交”。