I'm doing a project to apply html/CSS concepts that I started to study 1 month ago, I'm having a problem, in the site version for mobile , you can not put a very large input box in the header , then.
How do I make input type="search" just an image, and that when I click the BOX appears with the text for the user to type?
Applying only the HTML/CSS concept as proposed in the question, I believe this is what you want:
<!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>Reference: W3Schools
In HTML you will use a label with the image inside and the input off, like this:
<label for="imagem" id="label">
<img src=".." id="pesquisa">
</label>
<input type="search" name="imagem" id="imagem">
In CSS you will use the following:
input[type="search"] {
display: none;
}
and you will need to use JavaScript:
function mostrarcampo() {
var input = document.getElementById('imagem');
var clique = document.getElementById('label');
clique.onclick = function(){
input.style.display = 'block';
}
}
Use medium queries to hide or show elements according to the device. Here is an example showing color change, but can change anything:
/* 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;}
}