html - 如何通过CSS改变按钮的值

Question

代码如下:

<form id="my-button" action="#" method="post">
        <input type="submit" name="sample-button" value="Hello">
</form>

我需要能够通过 CSS 更改值。 没有点击或悬停。只需通过 CSS 替换即可。

我试过这样做，但没用。

#my-button input[type=submit]:before{
    content:"";
}
#my-button input[type=submit]:after{
    content:"HI";
}

Answer 1

如果你想要它用于显示/外观目的，你可以尝试这样的事情，使用纯 css:

Example in JSFiddle

它不会改变实际提交的值，但出于显示目的它工作正常。

input[type=submit] {
  color: transparent;
}

#my-button {
  display: inline-block;
  position: relative;
}

#my-button:after {
  content: "World";
  position: absolute;
  display: block;
  color: black;
  top: 1px;
  left: 1px;
  pointer-events: none;
}

<form id="my-button" action="#" method="post">
  <input type="submit" name="sample-button" value="Hello">
</form>