Ir para conteúdo

POWERED BY:

Arquivado

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

Marcos Coelho2

Dropdown personalizado

Por , em Desenvolvimento frontend

Recommended Posts

Marcos Coelho2    2

Marcos Coelho2
Postado

Olá galera,

 

estou tentando fazer um dropdown personalizado, que normal fique com uma imagem(de uma seta para baixo), e ao passar o mouse mude para outra imagem(um pouco mais escura), e se a pessoa clicar fica selecionado e aparece outra imagem(mais escura ainda), e a base do dropdown deve seguir o tamanho da escrita(ex: se estiver escrito: Todos, a base do dropdown não deve ficar muito maior que a palavra, e se a palavra mudar o tamanho da base deve seguir o tamanho da palavra.. Andei procurando na net mais não achei praticamente nada... o meio mais perto que encontrei de fazer o que quero foi com estes códigos:

 

<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="styled-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
</select>
</div>
</body>
</html>

 

.styled-select select {
  background: transparent;
  width: 230px;
  padding: 5px;
  font-size: 16px;
  border: 0px solid #ccc;
  height: 34px;
}

.styled-select {
max-width:200px;
  height: 34px;
  overflow: hidden;
  background: url(dropdown.png) no-repeat right #ddd;
}

 

mas com ele só consigo dar um valor fixo para a base do dropdown, e ainda não testei as imagensque devem mudar...

Podem me ajudar com isto?

 

Obr

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