时间戳

首页 > 解决方案 > 如何仅使用 CSS 更改 html 按钮的值

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

问题描述

我无权访问 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。但是，我无法在按钮内显示“提交”一词。

我想要的只是替换此按钮的文本/值。

请让我知道如何仅使用 CSS执行此操作

标签： cssbutton

解决方案

输入标签不支持 ::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>

推荐阅读