Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

deckards2bibi

imagem no fundo de input

Por , em Desenvolvimento frontend

Recommended Posts

deckards2bibi    1

deckards2bibi
Postado

bom andre assim

envez de ficar aquele espaço branco dos input

eu queria que ficasse uma iamgem sabe

e aquele negocio branco sumisse

poderia ser qualquer imagem

 

tipo com bordar arredondadas ou aquelas que ficam tipo desenhado por lapis

Compartilhar este post

Link para o post
Compartilhar em outros sites

Felipe.P    0

Felipe.P
Postado

bom andre assim

envez de ficar aquele espaço branco dos input

eu queria que ficasse uma iamgem sabe

e aquele negocio branco sumisse

poderia ser qualquer imagem

 

tipo com bordar arredondadas ou aquelas que ficam tipo desenhado por lapis

 

Não sei se vai ajudar, mas pelo que entendi é em campos de formulário.

no CSS declare as condições seguintes

 

/*CSS*/

#sua_div input {
background:url('URL_DA_IMAGEM_AQUI') no-repeat right; /*Apos a url defina onde você quer a imagem posicionada dentro do campo input ou coloque repeat para criar um background completo no campo input*/

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

deckards2bibi    1

deckards2bibi
Postado

vou da um exemplo aki vamos la

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>input com imagens</title>
<style type="text/css">
#teste input{
background:url(img01.png) no-repeat right;
border:0;
padding:7px 24px;
}


</style>
</head>

<body>
<div id="teste">
Nome: <input type="text" />


</div>


</body>
</html>

 

bom a imagem aparece no fundo sim mas nao fica configurada corretamente

nao fica encaixada a parte que eu começo a digitar nao inicia de forma alinha dentro do input

Compartilhar este post

Link para o post
Compartilhar em outros sites

André do Vale    76

André do Vale
Postado

Bom, sendo input[type=text] fica mais fácil de customizar. Vou supor que você utilize um fundo inteiro que simule o campo, e esta imagem tenha 150x30. Eu usaria algo do tipo:

 

input[type=text] {
padding: 3px; /*Para o cursor não usar toda a altura*/
text-ident: 5px; /*Para o cursor não ficar tão próximo da borda esquerda do campo*/
width: 144px; /*Largura do campo - o valor de padding*/
height: 24px; /*Altura " " " " " "*/
line-height: 22px; /*Eu utilizo a altura da linha pouco menor que a altura devido a alguns tipos terem espaço a mais no topo, daí fica melhor alinhado assim*/
background: url(campoInput.png);
border:none;
}

 

Agora, se a sua imagem não é o campo inteiro, você pode ficar atento as propriedades do "background".

 

background: background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito