Question

所以，代码是这样的：

HTML ：

<input type="button" id="oneid" class="cls">

CSS

.cls {
border: none;
text-align: center;
text-decoration: none;
top: 50%;
transform: translateY(-50%);
height: 200px;
background-color: rgba(0, 0, 0, 0.3);
display: block;
width: 500px;
position: absolute;
cursor: pointer;
}
.cls:before {
top: 50%;
left: 50%;
position: absolute;
display: block;
content: "";
width: 35px;
height: 35px;
border-right:16px solid #000000;
border-top:16px solid #000000;
transform: rotate(45deg);
}

我有两个问题：

1）为什么我不能使用:before标记显示input箭头，而使用span代码而不是input箭头显示？如何使用input标记进行此操作？

<input type="button" id="oneid" class="cls"> - 不是工作示例。

<span type="button" id="oneid" class="cls"></span> - 工作示例。

2）如何正确居中:before箭头？因为为top设置的left和50%并未真正将箭头置于中间位置。

*我想要一个跨浏览器的解决方案，只需要css和html。

Answer 1

只需使用： -

<button type="submit" id="oneid" class="cls">button</button>

Css箭头（带边框）在输入类型按钮中不起作用

1 个答案: