0
Well, I’m using a CSS block where I need to change an element, but that change depends on whether two other elements correspond to a particular state; example: to change . textAlteration, the element . text1 must be with Focus, and the element . text2 must be empty (or valid/invalid). PS: if I use separately, type: #box form . text1:Focus ~ . textAlteration {.... }, ok, works, as well as if I do: #box form . text2:Empty ~ . textText; or: #box form . text1:Valid ~ .textText. But how to join these two precepts (~)? That is, I want to use "~ . textAlteracao" only when it is preceded by two selector conditions. I believe that there is a CSS medium, and that should be simple, but I tried many combinations and nothing. I appreciate the help.
Ops! beauty, follow code: first the.css style, then the test.html
* {
margin: 0;
padding: 0;
}
body {
background-position: center;
background-image: url("../IMAGENS/papel-de-parede-5.jpg");
}
#corpo-form div {
position: relative;
display: block;
height: 55px;
width: auto;
margin: 10px;
border-radius: 5px;
font-size: 16pt;
outline: none;
background-color: rgba(255, 255, 255, 0.7);
}
#corpo-form form .text {
height: 90%;
position: absolute;
padding-left: 5%;
top: 5%;
width: 100%;
border-radius: 5px;
font-size: 12pt;
background: transparent;
border: none;
outline: none;
}
#corpo-form form .text:empty~.placehold {
height: 90%;
pointer-events: none;
font-size: 25pt;
position: absolute;
left: 5%;
top: 20%;
color: rgba(0, 0, 0, .7);
transition: .5s;
}
#corpo-form form .text:focus~.placehold {
color: #ff265c;
top: 3%;
left: 2%;
font-size: 10pt;
transition: .5s;
font-weight: bolder;
}
input[type=submit] {
background-color: #20202f;
color: #fff;
cursor: pointer;
border: none;
width: 100%;
height: 55px;
border-radius: 5px;
font-size: 16pt;
outline: none;
}
input[type=submit]:hover {
background-color: rgba(179, 134, 0, 0.8);
color: #000;
}
#corpo-form h1,
#corpo-form-cad h1 {
text-align: center;
color: #ffffff;
padding: 10px;
font-size: 30pt;
}
#corpo-form a {
margin: 10px;
text-align: center;
text-decoration: none;
color: #ffffff;
display: block;
padding-bottom: 20px;
}
#corpo-form a:hover {
text-decoration: underline;
font-size: 14pt;
}
#corpo-form {
width: 420;
margin: 130px auto 0px auto;
background-color: rgba(0, 0, 0, 0.4);
}
#corpo-form-cad {
width: 420;
margin: 100px auto 0px auto;
}<html lang="pt-br">
<head>
<title>Projeto Login</title>
<link rel="stylesheet" href="CSS/estilo.css">
<script type="text/javascript" src="JS/funcoes.js"></script>
</head>
<body>
<div id="corpo-form">
<form method="POST">
<h1>Login</h1>
<div>
<input type="email" class="text text2" name="email" id="email" required>
<label class="placehold" name="email_hold">Usuário</label>
</div>
<div>
<input type="password" class="text" name="senha" id="senha" required>
<label class="placehold" name="senha_hold">Senha</label>
</div>
<div class="class_submit">
<input type="submit" value="Acessar" onclick="valida_acesso()">
</div>
<br>
<a href="cadastrar.php">Ainda nao é inscrito?<strong> Cadastre-se!</strong></a>
</form>
</div>
</body>
</html>
I suggest you edit the question and put a snippet of your code, to better view the problem
– Gabriel Gonçalves
Fernandes edits your question put the HTML you have there and the CSS of the form. Without them it is difficult to give you an accurate answer.
– hugocsl
Fernandes first see here that the rule
:emptyseems not to work for inputs https://answall.com/questions/326557/no-css-por-que-a-pseudo-classes-empty-functionae-a-notempty-n%C3%A3o-worksn– hugocsl
Possible duplicate of Do not "terminate" the effect when you have something in the input
– hugocsl
And two answers that might interest you, because they use the
placeholderto determine if you have something inside the field or not: option 1: https://answall.com/questions/327674/howto prevent que-um-input-required-j%C3%A1-start-with-the-style-of-css-invalid and option 2: https://pt.stackoverflowcom/questions/328723/coloca-um-if-no-css/328743#328743– hugocsl