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? — Johar Zaman
– Johar Zaman, Commented Aug 23, 2021 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
– fubar, Commented Aug 23, 2021 at 11:49

ANDO Andriamalala · Accepted Answer · 2021-08-23 12:23:27Z

1

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>

answered Aug 23, 2021 at 12:23

ANDO Andriamalala

3181 silver badge7 bronze badges

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

Comments

Mark Rotteveel · Accepted Answer · 2021-08-23 14:11:18Z

0

Just remove this code, it will work

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

edited Aug 23, 2021 at 14:11

Mark Rotteveel

110k241 gold badges160 silver badges233 bronze badges

answered Aug 23, 2021 at 12:55

Gurjinder Kaur

192 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related