0
Look at that:
The question noted as Duplicate, was of my own, recent!
It has not yet been answered, because despite the indication of another link, there is diffuses the application of possible selectors, ie I did not understand.
It is important to note that, in some situations, only the question is solved if someone actually resolves by adding or changing the sent snippet, leaving the code working as proposed, just this!
That is what I am asking for, to amend the code to make it work in the proposed way, that is to say, that the elements label only return to normal size if fields, marked as required, mainly the Email, are empty and/or invalid.
In case the label Password returns to normal if the input is empty, already the label User, returns if the input is empty or filled but invalid.
Follows original text of the question:
Well, I’m using a CSS block in which I need to change an element, but that change depends on whether two other elements correspond to a particular state; example:
to change .textoAlteraçao, it is necessary that the .texto1 is with Focus, and the element .texto2 is empty (or valid/invalid).
PS: if I use separately, like:
#box form .texto1:focus ~ .textoAlteraçao {....}
Okay, it works, just like I do:
#box form .texto2:empty ~ .textoAlteraçao;
or:
#box form .texto1:valid ~ .textoAlteraçao
But how to join these two precepts (~)?
I mean, I want to use ~ .textoAlteracao only when 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.
Follow code: first the.css style, then the.html test
* {
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>So that the "Label" elements only return to normal size if the respective input is empty or invalid, otherwise they remain minified above the input text! I think for that, I would have to javer a way to tell the renderer: only change such an element if it is preceded by "that" and "that" (conditions).
Maybe this other question will help you put the "and" in your selector: https://stackoverflow.com/q/2797091/4730201
– Ricardo Pontual
Ricardo, the link you passed, is really interesting, but... they developed a theory, and in practice, I saw no solution to the question presented by the user. Another thing, if you or someone understood how selectors work for the issue, please do me a great kindness to change my code I posted, solving the point I proposed.. simple like that! Someone who got it right, sends a complementary/corrective snippet of what I posted here, working, and ready. Thanks for the attention!
– Fernandes
Ok! solved... Ufa! I put a placeholder property in Html and, in CSS, I put the filter:
code#body-form form input[type="email"]:not(:placeholder-Shown) ~ . placehold . As suggested by hugocsl, in link– Fernandes
Correcting my comment: Ok! solved... Ufa! I put a placeholder property in HTML and, in CSS, I put the filter:
#corpo-form form input[type="email"]:not(:placeholder-shown) ~ .placehold. As suggested by hugocsl, in link. And in the placeholder, just left with a blank, not to appear and not to disturb. Thank you all!– Fernandes