[Resolvido] CSS sprite dentro de um input

[_Isis_ 202]

Gente, já rodei a internet procurando exemplos e tutoriais, mas devo ter esquecido de algo...

A idéia é fazer uma searchbox (HTML5) parecida com o Spotlight do Mac OS. Estou usando o Twitter bootstrap e existe um png com diversos ícones.

Como sempre li sobre os css sprites, resolvi tomar vergonha na cara e tentar usar isso.

 

<thead>
		<tr class="toolbar">
			<th colspan="4">
				<input type="search" class="spotlight-search" id="user-search-box"/>
			</th>
		</tr>
</thead>

 

.spotlight-search {
background:url('bootstrap/img/glyphicons-halflings.png') no-repeat -42px 7px;
border:1px solid #aaa;
border-radius:20px;
-moz-border-radius:20px;
}

 

O que consegui até agora foi posicionar o fundo deixando o ícone da lupa à esquerda. Mas como fazer p/ que somente o ícone da lupa apareça, escondendo os demais que estão na mesma linha? E por que o border-radius não funciona? Estou usando o Firefox16.

 

Lembrando que eu desenvolvo em C e Python. Não sou de mexer com front-end.

[ricardo_mc 19]

Em relação ao CSSsprite, é simples. Acontece que você está usando uma imagem bom fundo de um Input, então a imagem vai percorrer toda a área do Input. O fato de você posicionar a imagem, não quer dizer que ela vá ser "cortada", para aparecer apenas o que você quer.

 

Para esses casos, o CSS Sprite precisa ser alterado. Quando o ícone vai fazer parte de uma elemento de área comprida horizontalmente, é preciso que não tenha outras pequenas imagens ao lado do ícone, caso contrário, elas vão aparecer.

 

Por exemplo, em um site que fiz, tem alguns ícones de rede social que uso à esquerda do nome de cada um, portanto, tive que mudar a Imagem para não ter nada à direita da imagem. Segue a imagem do CSS Sprite:

http://gestorprocessual.com.br/prototipo/images/template/cssSprite-icons.png

 

 

Agora quanto ao border-radius, tem que ver se não tem nada sobrepondo o CSS, porque a declaração para o Mozilla está correta. Tenta colocar ele nessa ordem:

 

-webkit-border-radius: 20px !important;
-moz-border-radius: 20px !important;
border-radius: 20px !important;

 

O !important é para forçar aceitar o estilo do CSS, caso tenha algo sobrepondo.

 

Vê se isso resolve.

[_Isis_ 202]

Tentei colocar isso na prática. Acho que consegui, embora não seja o css mais limpo que deve existir p/ isso:

 

<tr class="toolbar">
<th colspan="4">
   	<div class="spotlight-search">
   		<input type="search" maxlength="50" class="spotlight-search-bar" placeholder="Digite um nome"/>
		<div class="spotlight-icon spotlight-2 spotlight-round-1"></div>
	</div>
</th>
</tr>

 

.spotlight-2 {
background:url('bootstrap/img/glyphicons-halflings.png') no-repeat -40px 6px, -moz-linear-gradient(top,#78a3ff, #2469ff);
}

.spotlight-round-1 {
border-radius: 20px 0 0 20px;
}

.spotlight-icon {
height:26px;
margin-top:-36px;
margin-left:1px;
position:absolute;
width:30px;
}

.spotlight-search-bar {
background: -moz-linear-gradient(top, white, #e7ebf5) !important;
border-radius:20px !important;
border:1px solid rgba(0,0,0,0.4) !important;
padding:3px 6px 3px 33px !important;
font-style:italic;
width:300px;
z-index:1;
}

.spotlight-search input:focus {
background:white !important;
}

 

 

Não conhecia esse !important. Acho que o default do navegador é forçado nesses elementos de form. Valeu a dica.