Question

大家好，以下是我的代码，我需要更改值＆＃39;联系代理＆＃39;联系我们，但只使用css

<input type="submit" name="submit-cmb" value="Contact Agent" class="button-primary">

感谢您的帮助！如果需要更多详细信息，请告诉我

Answer 1

简短：这是不可能的，而是使用JavaScript

document.querySelectorAll('input[type=submit]')[0].setAttribute("value", "Contact Us");

长：CSS根本无法修改DOM。您需要使用HTML，无论生成该HTML或JavaScript的语言是什么。

JavaScript允许您随意操作DOM，而HTML / PHP / etc允许您在运行之前或运行时操作它。

这对于JavaScript来说是微不足道的（参见上文），但您无法使用CSS物理添加或删除元素或其属性。

你唯一可以做的CSS就是将输入的颜色设置为与背景（或透明）相同的颜色，然后使用伪元素来放置文本那里“联系我们”。它不会修改处理表单时提交的值，也不能添加到“void elements”，例如<input>（任何用<element />自行关闭的内容）

这是你用CSS做的最好的事情：

.parent-element {
    position: relative;
}

.parent-element:after {
    content: "Contact Us";
    color: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    pointer-events: none;
}

[name="submit-cmb"] {
    color: transparent;
}

再次注意，这实际上不会改变按钮的值，而是“隐藏”按钮上的文本，然后在其上放置一些不同的文本。您必须根据实际布局调整定位，但如果您真的无法修改HTML或使用JavaScript，它将帮助您入门。

另请注意，:after元素会影响点击次数，因此您需要确保可以使用pointer-events: none; - 或使用:before，将其设置为低于z-index按钮，将按钮背景更改为透明....等等等等。你看，这真的不能/不应该这样做。

.parent-element {
    position: relative;
}

.parent-element:after {
    content: "Contact Us";
    color: #000;
    position: absolute;
    left: 5px;
    top: 1px;
    pointer-events: none;
}

[name="submit-cmb"] {
    color: transparent;
}

<div class="parent-element">
    <input type="submit" name="submit-cmb" value="Contact Agent" class="button-primary">
</div>

仅使用css更改输入的值

1 个答案: