如何仅使用 CSS 更改 html 按钮的值

Question

我无法访问 HTML 文件，我只能使用 CSS.

我有：

input.submit-btn{
background-color:black;
color:white;
padding:2%;
border-radius: 8px;
font-size: 17px
}

<input type="submit" value="Register" id="btn" class="submit-btn">

我想使用 CSS 更改此 HTML 按钮的值。

我在网上找了一些代码，但是好像不行。

我试过了：

input.submit-btn{
background-color:black;
color:white;
padding:2%;
border-radius: 8px;
font-size: 17px
}

input.submit-btn{
text-indent: 200%;
color: transparent;
}

input.submit-btn::after{
content: "Submit";
text-indent: 0;
}

<input type="submit" value="Register" id="btn" class="submit-btn">

我已经成功不显示REGISTER这个词了。但是，我一直无法在按钮内显示 SUBMIT 这个词。

我只想替换这个按钮的text/value。

请告诉我如何做到这一点仅使用CSS

Answer 1

输入标签不支持::after 和::before 伪元素试试这个代码

.submit-container {
  position: relative;
  display: inline-block;
}

.submit-btn {
  background-color: black;
  color: transparent;
  border: none;
  padding: 15px 35px;
  border-radius: 5px;
}
.submit-container::before {
  content: 'SUBMIT';
  display: block;
  position: absolute;
  color: white;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div class="submit-container">
  <input type="submit" value="Register" id="btn" class="submit-btn">
</div>

Answer 2

只要删除这段代码，它就会起作用

input.submit-btn {
    text-indent: 200%;
    color: transparent;
}

如何仅使用 CSS 更改 html 按钮的值

How to change the value of an html button using CSS only

css

button