Colocar cor na seta do dropdownlist ou alterar a seta azul com uma imagebutton

Question

Gostaria de saber se é possivel alterar a cor da seta do dropdownlist ou trocar por uma imagem?

Answer 1

Gostaria de saber se é possivel alterar a cor da seta do dropdownlist ou trocar por uma imagem?

Aqui tem um projecto de como fazer isto: http://www.codeproject.com/KB/custom-controls/csMultiColorDropDownList.aspx

---

Just Be Humble Malange!

Answer 2

Prezado,

WinForms ou WebForms?

---

André Alves de Lima
Visite o meu site: http://andrealveslima.spaces.live.com
Me siga no Twitter: @andrealveslima

Answer 3

Então, esse projeto só mostra como mudar a cor do conteudo do dropdownlist, eu quero apenas mudar a cor da seta que você clika para aparecer o conteudo!

 

 

Answer 4

Opá Andre é em WebForms.

Answer 5

Gostaria de saber se é possivel alterar a cor da seta do dropdownlist ou trocar por uma imagem?

Aqui tem a lista deste control: http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.dropdownlist.aspx

 

---

Just Be Humble Malange!

Answer 6

Prezado(a),

Estou migrando seu post para o fórum de ASP.NET.

Por favor, das próximas vezes que for postar alguma dúvida referente a esse assunto, poste por lá.

Obrigado.

---

André Alves de Lima
Visite o meu site: http://andrealveslima.spaces.live.com
Me siga no Twitter: @andrealveslima

Answer 7

Um amigo meu me passou a solução de como alterar com jaascript e css.

 

Vou postar aqui a solução.

 

<style type="text/css">
            input {
            
              display: block;
              margin: 0 0 10px;
              padding: 0;   
            }
            input:focus {
              background: #fff;
            }      
            select {
              display: block;
              margin: 0 0 10px;           
            }
            select.replaced {
              display: none;
            }
            ul.selectReplacement
            {
              background: url(images/ibtndp_03.png) bottom left no-repeat;
              background-position:right;
              padding: 3;
              height: 1.65em;
              position: relative;
              z-index: 1000;
            }
            ul.selectReplacement li
            {            
              background: #ebeced;
              font-family: Arial, Helvetica, sans-serif;
              font-size: 12px;
              cursor: pointer;
              display: none;
              line-height: 1.7em;
              list-style: none;
              margin: 0;                       
            }
            ul.selectOpen li {
              display: block;
            }
            ul.selectReplacement li.selected {
              background: url(images/ibtndp_03.png) bottom left no-repeat;
              background-position:right;
              display: block;
              padding:3px;
            }
            ul.selectOpen li.selected {
              padding:3px;
              border: 0;
              display: block;
            }
            ul.selectOpen li:hover,
            ul.selectOpen li.hover,
            ul.selectOpen li.selected:hover {
             
            }
  </style>
  <script type="text/javascript">
    function selectReplacement(obj) {
      obj.className += ' replaced';
      var ul = document.createElement('ul');
      ul.className = 'selectReplacement';
      var opts = obj.options;
      var selectedOpt = (!obj.selectedIndex) ? 0 : obj.selectedIndex;
      for (var i=0; i<opts.length; i++) {
        var li = document.createElement('li');
        var txt = document.createTextNode(opts[i].text);
        li.appendChild(txt);
        li.selIndex = i;
        li.selectID = obj.id;
        li.onclick = function() {
          selectMe(this);
        };
        if (i == selectedOpt) {
          li.className = 'selected';
          li.onclick = function() {
            this.parentNode.className += ' selectOpen';
            this.onclick = function() {
              selectMe(this);
            };
          };
        }
        if (window.attachEvent) {
          li.onmouseover = function() {
            this.className += ' hover';
          };
          li.onmouseout = function() {
            this.className =
              this.className.replace(new RegExp(" hover\\b"), '');
          };
        }
        ul.appendChild(li);
      }
      obj.parentNode.insertBefore(ul,obj);
    }
    function selectMe(obj) {
      var lis = obj.parentNode.getElementsByTagName('li');
      for (var i=0; i<lis.length; i++) {
        if (lis[i] != obj) {
          lis[i].className='';
          lis[i].onclick = function() {
            selectMe(this);
          };
       } else {
          setVal(obj.selectID, obj.selIndex);
          obj.className='selected';
          obj.parentNode.className =
            obj.parentNode.className.replace(new RegExp(" selectOpen\\b"), '');
          obj.onclick = function() {
            obj.parentNode.className += ' selectOpen';
            this.onclick = function() {
              selectMe(this);
            };
          };
        }
      }
    }
    function setVal(objID,val) {
      var obj = document.getElementById(objID);
      obj.selectedIndex = val;
    }
    function setForm() {
      var s = document.getElementsByTagName('select');
      for (var i=0; i<s.length; i++) {
        selectReplacement(s[i]);
      }
    }
    window.onload = function() {
      (document.all && !window.print) ? null : setForm();
    };   
  </script>

 

esse código já faz com que todos os dropdownlis sejam mascarados com imagem de fundo e com uma imagem que servirá como botão.