1
I’m doing a project to apply some concepts of html/CSS I started studying 1 month ago, I have a problem, in the version of the site to mobile, can’t put a box of input very large in header, then.
How do I make the input type="search" is just an image, and when clicking appears the BOX with the text for the user to type?
2
in HTML you will use a label with the image inside and the input outside, thus:
<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';
}
}
0
Applying only the concept of HTML/CSS as proposed in the question, I believe that’s 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
-2
Use media queries to hide or display elements depending on the device. Here’s an example showing color change, but you 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;}
}
Browser other questions tagged html css3
You are not signed in. Login or sign up in order to post.
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_input_type_image
– user60252
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/image
– user60252