Increase the word size, value of the placeholder attribute of the type inputs?

Question

Increase the word size, value of the placeholder attribute of the type inputs?

Navigation

#1 by (3 votes)
#2 by (2 votes)
#3 by (0 votes)

1

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

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

javascript html5 css

asked by anonymous 08.02.2017 / 23:37

3 answers

2

Can be done with CSS, the syntax changes depending on the browser. Here's an 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>

link

09.02.2017 / 01:10

0

Good to increase the font size the staff has already answered.

Then to make the word take up more space you can use the letter-spacing property 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"/>

09.02.2017 / 01:46

What is the function of wrap_content? How to remove text with accents in php?

score 3 · Accepted Answer

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