Placing an IF in CSS

Navigation
2

I have a CSS that shows and hides a div . But I want this to happen only if this field is filled in, 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" />

It 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 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;
}
    
asked by anonymous 11.09.2018 / 15:09

4 answers

7

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

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

It looks kind of confusing, but check out the code below and test it to see it 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 pseudo-class browser support: placeholder-shown: link (does not work in IE or Edge)

OBS: 2 The Mozilla documentation on: placeholder-shown can be seen here: link

    
11.09.2018 / 16:02
6

Mariana, as commented previously with "pure" CSS is impossible to perform an IF condition. But you can use JavaScript to change the behavior of the element over a given 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 input with addEventListener() and executed a function that verifies that the input value is different from empty; if it is, it shows the div , otherwise it hides the same.

References:

11.09.2018 / 15:24
4

You can create a input required , which has a pattern that the valid format is at least one character . And then use :valid to display the content when the condition is satisfied: 

.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>
    
11.09.2018 / 16:15
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>
    
11.09.2018 / 15:43
IF syntax within an ECHO Find the best-selling item together with a certain item [duplicate]