como criar um campo input com um X à direita como na pesquisa google?

[Paulo Henrique Freiberger 0]

mt legal recurso, mas nao tenho ideia de como colocar aquele botao de limpar dentro do campo pesquisa como no google.

[Denis.Santos 7]

É fácil você fazer isso com HTML5 ao invés de você fazer um input de type="text", você faz type="search", isso já é o suficiente para ele ser de pesquisa.

[moviebr 2]

Exemplo como eu faço :

<div id="campo_pesquisa">
<input type="text" style="float:left;" value="qualquer coisa" /><input type="submit" style="float:right;" value="X" >
</div>

[Diéssica 140]

O que você quer pode ser obtido determinando o atributo [inline]type="search"[/inline] no campo. Nos browsers, o recurso é nativo.

Para obter o mesmo resultado, basicamente é CSS (responsável pelo "X" no elemento) e JavaScript (responsável por limpar o campo e, se necessário, detectar se o campo foi preenchido para então executar o evento anterior - como em um Search Input).

Mas também há como solucionar sem JavaScript, através do Reset Input do HTML.

<input type="reset" value="Limpar">

...Que nada mais é do que um botão que "reseta" o valor dos campos do formulário quando clicado. Assim, o campo volta a ter seu valor padrão.

Como (quase) tudo no CSS, há diferentes maneiras de solucionar a posição do "X". E uma delas é utilizando a propriedade position. Um exemplo considerando a solução sem JS:

HTML:

<form class="formulario">
  <input class="nome" name="nome" type="text">
  <input class="limpar" type="reset" value="X">
</form>

CSS:

input { border: 0; }

.formulario {
   position: relative;
   display: inline;
}
 
.nome {
    padding: 10px 25px 10px 10px;
    border: 1px solid #ccc;
}
 
.limpar {
   position: absolute;
   right: 10px; top: 0.5px;
   padding: 0;
   cursor: pointer;
   background: #fff;
   color: orange;
   font-weight: bold;
}

Resultado no JSBin

O código CSS sem os estilos adicionais (leia-se "enfeites") é, na verdade, minúsculo. Fica assim:

 

.formulario {
   position: relative;
   display: inline;
}
 
.nome { padding-right: 25px; }
 
.limpar {
   position: absolute;
   right: 10px;
}

 

 

Referências:
:seta: input - Mozilla Developer Network
:seta: position - Mozilla Developer Network