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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

那真的不是CSS的用途。

CSS用于设计内容样式; HTML是针对实际内容的。

如果您需要在加载HTML后修改内容，那么这就是Javascript的用途。

因此，您问题的真正答案是：直接修改HTML，或使用Javascript。你可以用

   $(document).ready(function() {
      $("#my-button input").val("Hi");
   });

Answer 3

1）你不能只用css“改变”某些值。您可以对以下事件执行某些操作：hover /：focus，但不能影响像javascript这样的元素。

2）：before和：after是父元素中的单个元素，与元素不同。

3）最重要的部分 - 输入元素不能：在/之后的元素。

4）如果你想改变任何东西，你需要访问html / js。

Answer 4

button:hover:before {
  content: "Button after hover>>"
}

button:after {
  content: "Button before hover"
}

button:hover:after {
  content: ""
}

<button></button>

如何通过CSS更改按钮的值

4 个答案: