- communauté
- Apprendre
- Bibliothèque d'outils
- Loisirs
Maison > Questions et réponses > le corps du texte
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formulário | GN</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style>
body{font-family: Arial, Helvetica, sans-serif;
background-image: linear-gradient(to right, rgb(20, 220, 80), rgb(17, 54, 71));
}
.box{
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.6);
padding: 15px;
border-radius: 15px;
width: 23%;
}
fieldset{
border: 3px solid greenyellow;
}
legend{
border: 1px solid greenyellow;
padding: 10px;
text-align: center;
background-color: greenyellow;
border-radius: 8px;
color: black;
}
.inputBox{
position: relative;
}
.inputUser{
background: none;
border: none;
border-bottom: 1px solid white;
outline: none;
color: white;
font-size: 14px;
width: 100%;
letter-spacing: 2px;
}
#submit{
background-image: linear-gradient(to right, rgb(20, 220, 80), rgb(19, 169, 195));
width: 40%;
border: none;
padding: 10px;
color: black;
font-size: 17px;
cursor: pointer;
border-radius: 10px;
text-align: center;
}
#submit1{
position: relative;
left: 60px;
background-image: linear-gradient(to right, rgb(20, 220, 80), rgb(19, 169, 195));
width: 40%;
border: none;
padding: 10px;
color: black;
font-size: 17px;
cursor: pointer;
border-radius: 10px;
text-align: center;
font-style: inherit;
}
#submit:hover{
background-image: linear-gradient(to right, rgb(20, 220, 80), rgb(7, 105, 40));
}
#submit1:hover{
background-image: linear-gradient(to right, rgb(20, 220, 80), rgb(7, 105, 40));
}
.labelInput{
position: absolute;
border: none;
pointer-events: none;
transition: .5s;
}
.inputUser:focus ~.labelInput,
.inputUser:valid ~ .labelInput{
top: -20px;
font-size: .85px;
color: greenyellow;
}
</style>
</head>
<body>
<div class="box">
<from action = "">
<fieldset>
<legend><b>Cadastro de Pacientes</b></legend>
<br>
<div class="inputbox">
<label for = "nome" class="labelInput">*<b>Nome:</b></label>
<input type="text" name="nome" id="nome" class="inputUser" required>
</div>
<br><br>
<div class="inputbox">
<label for ="email" class="labelInput"><b>Email:</b></label>
<input type="text" name="email" id="email" class="inputUser" required>
</div>
<br><br>
<div class="inputbox">
<label for ="telefone" class="labelInput">*<b>Telefone:</b></label>
<input type="text" name="telefone" id="telefone" class="inputUser" required>
</div>
<p>*<b>Sexo:</b></p>
<input type="radio" id="feminino" name="genero" value="feminino" required>
<label for="feminino">Feminino</label>
<br>
<input type="radio" id="masculino" name="genero" value="masculino" required>
<label for="masculino">Masculino</label>
<br><br><br>
<div class="inputbox">
<label for ="data_nascimento">*<b>Data de Nascimento:</b></label>
<input type="date" name="data_nascimento" id="data_nascimento" class="inputUser" required>
</div>
<br><br>
<div class="inputbox">
<label for ="cidade" class="labelInput">*<b>Cidade:</b></label>
<input type="text" name="cidade" id="cidade" class="inputUser" required>
</div>
<br><br>
<div class="inputbox">
<label for ="estado" class="labelInput">*<b>Estado:</b></label>
<input type="text" name="estado" id="estado" class="inputUser" required>
</div>
<br><br>
<div class="inputbox">
<label for ="endereco" class="labelInput"><b>Endereço:</b></label>
<input type="text" name="endereco" id="endereco" class="inputUser" required>
</div>
<br><br>
<a href="file:///home/liniquer/Formul%C3%A1rio%20/pag1.html">
<button type="button" name="submit" id="submit" value= "< Voltar">< Voltar</button>
</a>
<a href="file:///home/liniquer/Formul%C3%A1rio%20/pag2.html">
<button type="button" name="submit" id="submit1" value="Avançar >">Avançar ></button>
</a>
</fieldset>
</body>
</html>
J'ai essayé de créer une classe appelée inputUser dans l'entrée, puis j'ai essayé de créer une animation dans le style d'étiquette mais cela n'a pas fonctionné et je ne sais pas pourquoi. L'animation inclut lorsque l'utilisateur clique sur le texte du camp, les étiquettes (Nome, Email, Telefone, Cidade, Estado et Endereco) montent (en haut : -20 px), la taille de la police diminue à 12 px et la couleur passe au verdâtre. jaune. [[Entrez la description de l'image ici](https://i.stack.imgur.com/8gg3w.png)](https://i.stack.imgur.com/Z05NC.png)
P粉3641297442023-09-16 12:02:04
Je pense que ce que vous cherchez, c'est de mettre 标签放在输入字段的顶部，直到用户处于焦点或有数据 在输入 à l'intérieur du terrain. Vous voulez donc que l’étiquette soit au-dessus, n’est-ce pas ?
J’ai joint un clip ci-dessous.
input:not(:invalid) + label,
input:focus + label {
top: 0;
opacity: 75%;
font-size: 0.9rem;
background: white;
transition: all .2s ease-in-out;
}
*{
font-family: arial;
padding: 0;
margin: 0;
}
form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.input-field {
position:relative;
width:204px;
}
input {
position: relative;
width: 200px;
margin: 20px;
padding: 10px 8px;
outline: none;
border: none;
border-bottom: 2px solid black;
font-size:1rem;
}
input:focus {
border-bottom: 3px solid black;
}
label {
position: absolute;
top: 30%;
left: 10%;
padding: 5px 10px;
font-size: 1rem;
pointer-events: none;
transition: all 0.2s ease-in-out 0s;
}
input:not(:invalid) + label,
input:focus + label {
top: 0;
opacity: 75%;
font-size: 0.9rem;
background: white;
transition: all .2s ease-in-out;
}<form>
<div class="input-field">
<input type="text" name="forename" required>
<label>First Name</label>
</div>
<div class="input-field">
<input type="text" name="surname" required>
<label>Last Name</label>
</div>
</form>