How to change the value of an html button using CSS only

Question

I do not have access to the HTML file, I can only use CSS.

I have:

input.submit-btn{
background-color:black;
color:white;
padding:2%;
border-radius: 8px;
font-size: 17px
}

<input type="submit" value="Register" id="btn" class="submit-btn">

I want to change the value of this HTML button using CSS.

I found some code online, but it didn't seem to work.

I tried:

input.submit-btn{
background-color:black;
color:white;
padding:2%;
border-radius: 8px;
font-size: 17px
}

input.submit-btn{
text-indent: 200%;
color: transparent;
}

input.submit-btn::after{
content: "Submit";
text-indent: 0;
}

<input type="submit" value="Register" id="btn" class="submit-btn">

I have been able to successfully not display the word REGISTER. However, I haven't been able to display the word SUBMIT inside the button.

All I want is to replace the text/value of this button.

Please let me know how to do this using CSS only

Does this answer your question? [How can I replace text with CSS?](https://stackoverflow.com/questions/7896402/how-can-i-replace-text-with-css) — Johar Zaman, Aug 23 '21 at 11:48
Input fields cannot contain child elements, so pseudo elements won’t work. You could try a background image, but it wouldn’t be especially user friendly. — fubar, Aug 23 '21 at 11:49

score 1 · Accepted Answer · answered Aug 23 '21 at 12:23

Input tags do not support ::after and ::before pseudo element try this code

.submit-container {
  position: relative;
  display: inline-block;
}

.submit-btn {
  background-color: black;
  color: transparent;
  border: none;
  padding: 15px 35px;
  border-radius: 5px;
}
.submit-container::before {
  content: 'SUBMIT';
  display: block;
  position: absolute;
  color: white;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

<div class="submit-container">
  <input type="submit" value="Register" id="btn" class="submit-btn">
</div>

score 0 · Answer 2 · edited Aug 23 '21 at 14:11

0

Just remove this code, it will work

input.submit-btn {
    text-indent: 200%;
    color: transparent;
}

edited Aug 23 '21 at 14:11

Mark Rotteveel

100,966
191
140
197

answered Aug 23 '21 at 12:55

Gurjinder Kaur

19
2

How to change the value of an html button using CSS only

2 Answers2