如何通过 CSS 改变按钮的值答案

【问题标题】：How to change the value of a button through CSS如何通过 CSS 改变按钮的值
【发布时间】：2015-03-28 08:41:38
【问题描述】：

代码如下：

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

【问题讨论】：

为什么需要通过 CSS 来改变它？
我对主文件没有任何访问权限。我正在尝试通过 CSS 提出解决方案。 ://
你为什么不用 JavaScript 来做呢？ document.querySelector('input[name="sample-button"]').value = 'HI'
你可以试试$("#my-button input[type='submit']").attr('value', 'HI');
您不能使用 CSS 更改按钮的值，您可以更改按钮上显示的内容，但不能更改值本身。使用 Javascript。

标签： html css button

【解决方案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>

【讨论】：

OP 说I don't have any access with the main file 这意味着她/他不能直接修改 HTML 文件。
这只会改变按钮的显示，而不是值本身。
这对于这个例子/问题是一样的，这就是 OP 试图实现的。
不，不是，OP想改变按钮的值。
一般来说，你不需要提交的值来做其他事情，但为了显示目的。

【解决方案2】：

这真的不是 CSS 的用途。

CSS 用于样式化您的内容； HTML 用于实际内容本身。

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

所以你的问题的真正答案是：要么直接修改 HTML，要么使用 Javascript。你可以使用

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

【讨论】：

【解决方案3】：

1) 你不能只用 css 来“改变”一些值。您可以对诸如 :hover/:focus 之类的事件执行某些操作，但不能影响诸如 javascript 之类的元素。

2) :before 和 :after 是父元素中的单个元素，与您的元素不同。

3) 最重要的部分 - 输入元素不能有 :before/:after 元素。

4) 如果要更改任何内容，则需要访问 html/js。

【讨论】：

【解决方案4】：

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

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

button:hover:after {
  content: ""
}

&lt;button&gt;&lt;/button&gt;

【讨论】：

【解决方案5】：

如果你还在听，你可以这样做：

<style>
    .btn { display: none; }
    .btn:before {
      content: "+";
      display: inline;
    }
</style>

<button><span class="btn">Next</span></button>

【讨论】：