1

Estou fazendo um projeto para aplicar uns conceitos de html/CSS que comecei a estudar há 1 mês, estou com um problema, na versão do site para mobile, não dá para colocar uma caixa de input muito grande no header, então.

Como faço com que o input type="search" seja apenas uma imagem, e que ao clicar apareça a BOX com o texto para o usuário digitar?

2

3 Respostas 3

2

no HTML você irá usar uma label com a imagem dentro e o input fora, desse modo:

<label for="imagem" id="label">
     <img src=".." id="pesquisa">
</label>
<input type="search" name="imagem" id="imagem">

No CSS você irá utilizar o seguinte:

input[type="search"] {
    display: none;
}

e você precisará usar JavaScript:

function mostrarcampo() {
    var input = document.getElementById('imagem');
    var clique = document.getElementById('label');
    clique.onclick = function(){
       input.style.display = 'block';
    }
}
0

Aplicando somente o conceito de HTML/CSS conforme proposto na pergunta, acredito que seja isso que você quer:

<!DOCTYPE html>
<html>
<head>
<style> 
input[type=text] {
    width: 130px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('https://www.w3schools.com/howto/searchicon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

input[type=text]:focus {
    width: 100%;
}
</style>
</head>
<body>

<p>Form com pesquisa animada:</p>

<form>
  <input type="text" name="search" placeholder="Search..">
  <!-- Você pode remover o placeholder para ficar somente o icone! -->
</form>

</body>
</html>

Referência: W3Schools

-2

Usa media queries para esconder ou mostrar elementos conforme o dispositivo. Aqui um exemplo mostrando mudança de cor, mas pode alterar qualquer coisa:

/* Código geral, que será herdado por qualquer dispositivos.
   nesse caso, seria o código usado no desktop, na maioria das   vezes. 
   Se você já conhecer a ideia do Mobile First, esse primeiro código será destinado para mobiles.
*/
a {color: blue;}

/* 
 Pra dispositivos que tem uma largura mínima de 768 pixels. Tablets, por exemplo.
*/
@media screen and (min-width: 768px) {
  a {color: yellow;}
}

/* 
 Com uma largura mínima de 992 pixels. Monitores por exemplo.
*/
@media screen and (min-width: 992px) {
  a {color: green;}
}

/* 
 Dispositivos com largura mínima de 1200 pixels. Por exemplo TVs.
*/
@media screen and (min-width: 1200px) {
  a {color: black;}
}

Fonte do exemplo: Tableless

Você deve fazer log-in para responder a esta pergunta.