Increase word size, placeholder attribute value of text inputs?

Asked

Viewed 1,770 times

1

How do I increase word size, text type input tag placeholder attribute value?

<input type="text" name="login" placeholder="Login" required id="login">

inserir a descrição da imagem aqui

javascript css html5

3 answers

4


Option onFocus and onBlur:

function change() {
  document.getElementById('login').placeholder = 'Alterado';
}

function changeBack() {
  document.getElementById('login').placeholder = 'Login';
}
input {
  padding: 12px;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-size: 16px;
}
::-moz-placeholder { /* Firefox 19+ */
  font-size: 16px;
}
:-ms-input-placeholder { /* IE 10+ */
  font-size: 16px;
}
:-moz-placeholder { /* Firefox 18- */
  font-size: 16px;
}

input:focus::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  font-size: 20px;
}

input:focus::-moz-placeholder { /* Firefox 19+ */
  font-size: 20px;
}
input:focus:-ms-input-placeholder { /* IE 10+ */
  font-size: 20px;
}
input:focus:-moz-placeholder { /* Firefox 18- */
  font-size: 20px;
}
<input type="text" onFocus="change()" onBlur="changeBack()" name="login" placeholder="Login" required id="login">

2

Can be done with CSS, the syntax changes depending on the browser. Following example:

<!DOCTYPE html>
<html>
  <head>
    <style>
      input:-ms-input-placeholder  {
        font-size:16px;
      }

      input::-webkit-input-placeholder {
        font-size:16px;
      }

      input:-moz-placeholder {
        font-size:16px;
      }

 /* firefox 19+ */
      input::-moz-placeholder {
        font-size:16px;
      }
    </style>
  </head>
<body>
  <form action="demo_form.asp">
    <input type="text" name="login" placeholder="Login" required id="login">
  </form>
</body>

http://www.cssportal.com/blog/style-placeholder-text/

  • Hand on the wheel huh. Thanks a lot @Camilosantos

  • Vlw @Lucasbarbosafonseca... don’t forget to flag which solution was most suitable for you :)

0

Good to increase font size staff has already responded.

So to make the word take up more space you can use the property letter-spacing and assign the distance between the letters you want.

input:-ms-input-placeholder{letter-spacing:16px;}
input::-webkit-input-placeholder{letter-spacing:16px;}
input:-moz-placeholder{letter-spacing:16px;}	
<input type="text" name="login" placeholder="Login" required id="login"/>

  • Thank you @Magichat understood perfectly

  • @Lucasbarbosafonseca consider validating one of the answers by clicking below the evaluation arrows on the green icon.

Browser other questions tagged javascript css html5

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