Como faço para aumentar o tamanho da palavra, valor do atributo placeholder da tag input do tipo texto?
<input type="text" name="login" placeholder="Login" required id="login">
Opção onFocus
e 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">
Pode ser feito com CSS, a sintaxe muda a depender do navegador. Segue exemplo:
<!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>
Bom para aumentar o tamanho da fonte o pessoal já respondeu.
Então para fazer a palavra ocupar mais espaço você pode usar a propriedade letter-spacing
e atribuir a distância entre as letras que desejar.
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"/>