html - Css arrow(with border) not working in input type button -

this question has answer here:

• can use :after pseudo-element on input field? 17 answers

so, code goes this:

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); } 

i got 2 questions:

1) why can't make :before arrow show input tag, while span tag instead of input arrow showing? how make input tag?

<input type="button" id="oneid" class="cls"> -- not working example.

<span type="button" id="oneid" class="cls"></span> -- working example.

2) how center :before arrow correctly? because top , left set 50% not center arrow in middle.

*i want cross-browser solution , css , html only.

just use:-

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