Put an IF in CSS

Asked

Viewed 9,348 times

2

I have a CSS that shows and hides a div. But I want this to happen only if this field below is filled, that is, if it is different from empty.

<input type="text" onkeypress="return BuscaDados(event);" onblur="CarregaFornecedor(this.value);" class="form-control" name="FornecedorID" id="idfornecedor" />

He shows this div:

<div class="col-md-5 div_teste" id="mostrar">
  <div class="col-md-12">
    <label class="control-label" id="fornecedor"></label>
  </div>
  <div class="col-md-12">
    <label class="control-label" id="nomefornecedor"></label>
  </div>
  <div class="col-md-12">
    <label class="control-label" id="ruafornecedor"></label>
    <label class="control-label" id="nfornecedor"></label>
  </div>
  <div class="col-md-12">
    <label class="control-label" id="bairrofornecedor"></label>
    <label class="control-label" id="cidadefornecedor"></label>
  </div>
</div>

This is the CSS:

#mostrar {
    display: none;
}

#passarmouse:hover #mostrar {
    display: block;
}

.div_teste {
    width: 350px;
    height: 120px;
    background: #ffffff;
    position: absolute;
    z-index: 100;
    top: 30%;
    left: 40%;
    border: 1px solid;
}
html css
  • 1

    Use Javascript to validate and change the state of the element.

  • Only with CSS is impossible. HTML -> Structuring; CSS -> Estilização; JS -> Demeanor.

  • Mariana gave a solution only with CSS if you have any questions can give me a touch of the answer I try to help you.

4 answers

7


You can do this only with CSS and the property :placeholder-shown

The idea is this, if the field has a placeholder how value you can make the :hover that nothing happens, but if he has something typed in logically the placeholder will no longer be present, so I used :not(:placeholder-shown) to validate this condition. Then when the field does not have placholder, 'cause there’ll be something in it, then when you do the :hover to div appears.

It seems a bit confusing right, but see the code below and do the test to see working.

#mostrar {
    display: none;
}

#idfornecedor:not(:placeholder-shown):hover + #mostrar {
    display: block;
}

.div_teste {
    width: 350px;
    height: 120px;
    background: #ffffff;
    /* position: absolute; */
    z-index: 100;
    top: 30%;
    left: 40%;
    border: 1px solid;
}
<div id="passarmouse">

    <input type="text" onkeypress="return BuscaDados(event);" onblur="CarregaFornecedor(this.value);" class="form-control" name="FornecedorID" id="idfornecedor" placeholder="campo vazio" /> 

    <div class="col-md-5 div_teste" id="mostrar">
        <div class="col-md-12">
            <label class="control-label" id="fornecedor">teste</label>
        </div>
        <div class="col-md-12">
            <label class="control-label" id="nomefornecedor"></label>
        </div>
        <div class="col-md-12">
            <label class="control-label" id="ruafornecedor"></label>
            <label class="control-label" id="nfornecedor"></label>
        </div>
        <div class="col-md-12">
            <label class="control-label" id="bairrofornecedor"></label>
            <label class="control-label" id="cidadefornecedor"></label>
        </div>
    </div>

</div>

OBS1: See your browser support for the pseudo-class :placeholder-Shown: https://caniuse.com/#feat=css-placeholder-Shown (does not work in IE or Edge)

OBS:2 The Mozilla documentation on :placeholder-Shown can be seen here: https://developer.mozilla.org/en-US/docs/Web/CSS/:placeholder-Shown

  • In my code it works in parts, for example, the part of passing the mouse and appearing, and taking the mouse away, does not work.

  • @marianac_costa it will only show if it has some value inside the input and you do the :Hover, You want that after you put value in the input the div is always visible?

  • No, I want the div to be filled, but it only appears if you hover your mouse over it, in case the mouse isn’t over it, hide the div..

  • But she’s already that way here in the example... From a look at the structure of CSS and the structure of HTML, I think there is something different, so there is working partially

  • 1

    That’s what I wanted, sorry, there was another css getting in the way, and it worked. Thank you.

  • @marianac_legal coast that worked ai :), good luck with the project!

Show 1 more comment

6

Mariana, as commented earlier with CSS "pure" is impossible to perform an IF condition. But you can use Javascript to change the behavior of the element about a certain situation.

See the example based on your code:

let inputFilter = document.querySelector("#idfornecedor");
let mostrar = document.querySelector("#mostrar");

inputFilter.addEventListener("input", function() {
  if (inputFilter.value != "") {
    mostrar.classList.add('show'); 
  } else {
    mostrar.classList.remove('show');
  }
});
#mostrar {
    display: none;
}

#passarmouse:hover #mostrar {
    display: block;
}

.div_teste {
    width: 350px;
    height: 120px;
    background: #ffffff;
    position: absolute;
    z-index: 100;
    top: 30%;
    left: 40%;
    border: 1px solid;
}

.show {
  display: block !important;
}
<input type="text" class="form-control" name="FornecedorID" id="idfornecedor"/>

<div class="col-md-5 div_teste" id="mostrar">
    <div class="col-md-12">
        <label class="control-label" id="fornecedor"></label>
    </div>
    <div class="col-md-12">
        <label class="control-label" id="nomefornecedor"></label>
    </div>
    <div class="col-md-12">
        <label class="control-label" id="ruafornecedor"></label>
        <label class="control-label" id="nfornecedor"></label>
    </div>
    <div class="col-md-12">
        <label class="control-label" id="bairrofornecedor"></label>
        <label class="control-label" id="cidadefornecedor"></label>
    </div>
</div>

A typing event was captured in a input with the addEventListener() a function that checks whether the value of the input is different from empty; if it is, it shows the div, otherwise hides the same.

References:

  • 1

    You can only do it with CSS, but it’s not completely crossbrowser... :)

  • I referred to this condition of her, of taking the state of the element (in the case other than empty) and showing the div. This, only with CSS is impossible.

  • 1

    I’ll post the answer, let me get a coffee, but I’ll have my +1 ok rss

  • @hugocsl: put an answer on that. Make it clear that it may not be the best method - especially in this case, and then put a legal answer - remember, in addition to asking specific questions, the answers here become a repository of knowledge and techniques for other people with similar doubts.

  • That way it didn’t work, it works time, or hangs on the screen, and it doesn’t get a floating div. :(

  • About the div floating is a matter of CSS in it. In my example I just showed how you could do with Javascript. Also, if you run the snippet you will notice that it works as per the condition you put in the question.

  • @jsbueno and João, given mission is rss mission accomplished. Look there only with CSS, if you have any questions can comment there. I used this technique in this reply tb https://answall.com/questions/327674/howto prevent que-um-input-required-j%C3%A1-start-with-the-style-de-css-invalid

  • 1

    @hugocsl damn reply, show! : ) +1 upvote

  • It was the time of coffee :D

Show 4 more comments

4

Can create a input defendant, who owns a pattern that the valid format is at least one character. And then use :valid to display the content when the condition is met:

.search-list {
  display: none
}

input:valid + .search-list {
  display: block
}
<input type='text' placeholder='Buscar Fornecedor...' pattern='^\w*[\p{L}]\w*$' required>

<div class='search-list'>
  <p>Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet.</p>
</div>

  • Quite interesting idea!

0

you can solve with javascript:

var contador = 1;

function divGrande(){

 document.getElementById("minhaDiv").style.width = "400px";

}

function divPequena(){

 document.getElementById("minhaDiv").style.width = "200px";

}

function mudarTamanho(){


 if(contador == 1){
 document.getElementById("minhaDiv").style.width = "200px";
 contador = 0;
 }else{
 contador = 1;
  document.getElementById("minhaDiv").style.width = "400px"; 
  
 }



}
#minhaDiv{
width:400px;
height:400px;
background-color:#000;
color:#FFF;

}
<div id="minhaDiv">

Olá eu sou uma div

</div>
<br>
assim chamando a função através de clicks no botão
<br>

<button onclick="divGrande();">Div Grande</button>

<button onclick="divPequena();">Div Pequena</button>
<br>
E assim por If e Else
<br>
<button onclick="mudarTamanho();">Mudar Tamanho</button>

  • 4

    Dude and what does this have to do with the question???!!

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.