Input Submit value in two colors

Asked

Viewed 70 times

0

My first question here... starting my studies...

I have the following problem:

<input type="submit" value="Enviar E-book">

I need in the Bt text, "Send" to be one color and "E-book" to another. It is possible?

I can’t change it for <button>, because it is an imported form that already comes with this input tag.

javascript html css input
  • 3

    first what is the purpose of this? that is, for what?

  • aesthetic purpose, is what the person wants

  • If the answer below solved your problem and there was no doubt left, mark it as correct/accepted by clicking on the " " that is next to it, which also marks your question as solved. If you still have any questions or would like further clarification, feel free to comment.

1 answer

5

View documentation <button>: The Button element :

Content allowed: Permitted phrasing but not interactive content.

Then just place a valid content inside the button and apply a style.

.txt1 {
  color: red;
}

.txt2 {
  color: blue;
}
<button class="button">
  <span class="txt1">Enviar</span>
  <span class="txt2">E-book</span>
</button>

So in your case as the server button comes as <input> and this element does not support nested content. Take the input reference and replace it with a <button> using the property Element.outerHTML describing the HTML code of the element including its descendants.

const btn = document.getElementById("btn");

btn.outerHTML = `
   <button class="button">
      <span class="txt1">Enviar</span>
      <span class="txt2">E-book</span>
   </button>`;
.txt1 {
  color: red;
}

.txt2 {
  color: blue;
}
<input type="button" id="btn">

  • In his account, he cannot change the type of the element of input for button, soon, would not apply his answer Augustus.

  • 1

    @Leandrade, take a look.

  • I was afraid the question would be closed before I could answer and sent half

  • 1

    I understood Augusto : )

  • 1

    +1 for the idea of using outerHTML. I didn’t know that...

Browser other questions tagged javascript html css input

You are not signed in. Login or sign up in order to post.