0

Hi guys following is the code I have and I need to change the value 'contact agent' to contact us ,but only using css

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

Thanks for any help! please let me know if additional details required

1 Answer 1

4

Short: It's not possible, use JavaScript instead

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

Long: CSS can't modify the DOM at all. You need to use HTML, whatever language is generating that HTML, or JavaScript.

JavaScript will allow you to manipulate the DOM at will, while HTML/PHP/etc will let you manipulate it prior to or at runtime.

This would be trivial with JavaScript (see above), but you can't physically add or remove elements or their attributes with CSS.

The only thing you could really do with CSS is to set set the color of the input to the same color as the background (or transparent) and then use a pseudo-element to put the text "Contact Us" there. It wouldn't modify the value submitted when the form is processed though, and it can't be added to "void elements" such as <input> (anything that self-closes with <element />)

This is the best you could do with 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;
}

Note, again, that this would not actually change the value of the button, but "hide" the text on the button, and then put some different text over it. You'll have to adjust the positioning based on the actual layout though, but it would get you started if you REALLY can't modify the HTML or use JavaScript.

Also note that the :after element will interfere with clicks, so you need to make sure you can use pointer-events: none; - or use :before, set it below the z-index of the button, change the button background to transparent.... blah blah blah. You see this really can't/shouldn't be done.

.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>

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.