0

Como faço para que essa barra de pesquisa em vez de ser aberta para direita ser aberta para esquerda?

<style>

input.input_home {
  height: 50px;
  border: none;
  outline: none;
  padding-left: 50px;
  width: 0;
  position: absolute;
  top: 0;
  left: 0;
  background: none;
  z-index: 3;
  transition: width 1s ease-out;
  cursor: pointer;
}
input:focus { 
  border: 1px solid #ccc;
  border-radius: 25px;
  width: 50%;
  z-index: -1;
  transition: width 1s ease-in;
}
button { 
  height: 50px;
  width: 50px;
  background:  url('lupa.png')  center no-repeat;
  border: none;
  position: absolute;
  top: 0;
  z-index: 2;
  cursor: pointer;
}
button:focus {
  outline: none;
}
/* esconde o LABEL "Buscar" */
label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;	
}
</style>
<form action=" " method="post">
  <label for="busca">Buscar</label>
  <input class="input_home" type="search" id="busca" name="q">
  <button type="submit">OK</button>
</form>

1 Resposta 1

1

Pelo que eu entendi vc quer que a barra cresça, mas que o btn OK fique na direita certo.

Da forma que vc construiu o Form a maneira que encontrei foi colocando um margin-left no button com um transition quando vc fizer o focus no input. Então ao mesmo tempo que vc faz o focus no input e faz o transition nele eu tb faço um transition no button que vem a seguir com

inserir a descrição da imagem aqui

Vc vai reparar que eu usei dois transition no button, ou antes e outro depois do :focus, isso foi preciso para fazer o "ajuste fino" enquanto o elemento abre e fecha para que fica mais sincronizado, mas vc pode brincar com esses valores para ver o que mais te agrada.

Segue o código da imagem acima

input.input_home {
	height: 50px;
	border: none;
	outline: none;
	padding-left: 50px;
	width: 0;
	position: absolute;
	top: 0;
	left: 0;
	background: none;
	z-index: 3;
	transition: width 1s ease-out;
	cursor: pointer;
}

input:focus {
	border: 1px solid #ccc;
	border-radius: 25px;
	width: 50%;
	z-index: -1;
	padding-right: 50px;

	transition: width 1s linear;
}

button {
	transition: margin-left 0s linear;
}

input:focus+button {
	margin-left: calc(50% - 65px);
	transition: margin-left 900ms linear;
	transition-delay: 100ms;
}

form {
	width: 50%;
}

button {
	height: 50px;
	width: 50px;
	background: url('lupa.png') center no-repeat;
	/* background:  url('https://placecage.com/50/50')  center no-repeat; */
	border: none;
	position: absolute;
	top: 0;
	z-index: 2;
	cursor: pointer;
}

button:focus {
	outline: none;
}

/* esconde o LABEL "Buscar" */
label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}
<form action=" " method="post">
	<label for="busca">Buscar</label>
	<input class="input_home" type="search" id="busca" name="q">
	<button type="submit">OK</button>
</form>

6
  • O que eu gostaria brother é justamente o contrario, que o botão ficasse na direita e ao clicar nele a barra fosse pra esquerda
    – Cairoodev
    27/05/2019 às 15:13
  • @Cairoodev se ela for pra esquerda vai ir para fora da tela...
    – hugocsl
    27/05/2019 às 15:17
  • ai basta eu colocar o botao do lado esquerdo também não? você consegue fazer isso?
    – Cairoodev
    27/05/2019 às 15:19
  • ai o input e o btn vai ir para fora da tela, não vejo sentido nisso, acho que devo ter entendido algo errado, pois crescendo para esquerda não me parece correto. Tem como mostrar um exemplo ou explicar com um pouco mais de detalhe?
    – hugocsl
    27/05/2019 às 15:21
  • Isso que eu gostaria de saber se é possível fazer com esse código po. Basta imaginar esse efeito indo da direita para esquerda
    – Cairoodev
    27/05/2019 às 15:27

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

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .