Question

我试图'替换'选择输入上的按钮。我已经查看了jquery中的select替换插件，但它们都是一个有点臃肿的IMO。我想要实现的是一个简单的跨度，位于选择框的下拉按钮上，单击它时，选择选项会下降。

这就是我所拥有的：

$(document).ready(function(){

 $('select').after('<span class="cta arrow-down"></span>');
 $('input[type="submit"]').after('<span class="cta arrow-right"></span>');

 $('span.cta').each(function(){
  var $this = $(this);
  var $prev = $this.prev();
  var $dim = $prev.position();
  $this.css({'top':$dim.top, 'right':0, 'height':$prev.outerHeight(), 'width':$prev.outerHeight()});
  $this.click(function(){
   $prev.trigger('click');
  });
 });

});

我已经尝试了mousedown，并且还使用triggerHandler点击并使用mousedown调用相关的函数，但无济于事...

这有可能吗？

Answer 1

你不能以跨浏览器的方式真正做到这一点，主要是因为IE破坏了每个人的乐趣。在IE的早期版本中，<select>是直接从Windows窗体中获取的控件（这就是为什么它有z-index和样式问题），因此很多东西都没有标准化/支持...因为IE可以不太可靠。

要做你想做的事情，你必须走<select>替换路线，臃肿与否......再一次，IE是这些插件甚至存在的主要原因。

Answer 2

我在这里问与OP相同的问题，而且我听不到有人说它无法完成。

世界上最受欢迎的网站之一：Facebook。

在他们的注册页面（索引页面，如果您没有登录），存在出生日，出生月份，出生年份和性别的下拉框。

我已经看到了每个“欺骗”下拉框的示例，将其替换为div s，但这不在此处。至少不完全。下拉框完全是跨浏览器，在每个平台上看起来都一样。

这是证明它不是div，这是Windows 7上的IE8：

http://users.on.net/mbywaters/fb.jpg

没有HTML元素可以在浏览器的视口外显示。

显然有一些CSS的元素在起作用。在chrome中，您可以填充选择框并提供边框。这对IE不起作用，所以他们提供了一个div，它只包含IE：

http://users.on.net/mbywaters/fb2.jpg

自己玩这个表单，你会发现它的行为与真正的下拉框应该表现完全一样。

我已经辞职了，必须有一些JavaScript代码调用隐藏的select元素的下拉列表来显示。我没有时间遍历Facebook的JavaScript来搞清楚，但绝对必须有办法。

编辑：

看来我的回答还为时过早。

当我尝试这样做的时候，我让IE8模仿IE7这个小小的美丽，我忘了我已经包含了：

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

IE8完美显示填充，因为它以chrome显示。所以Facebook没有做任何棘手的事情。

所以IE7是问题，我想。不过，我创建了一个适合IE7，IE8，Chrome和Firefox 3.6.15（我测试过的唯一）的解决方案。

这是图片：

http://users.on.net/mbywaters/arrow.png

以下是代码：

    <!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" xml:lang="en" lang="en">
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/> 
    <script type="text/javascript" src="jquery-1.4.4.min.js"></script>
    <script type="text/javascript" src="jquery-ui-1.8.10.custom.min.js"></script>
    <style type="text/css">
      .hidden{
        padding:5px;
        display:inline;
        border:1px solid #888888;
        font-family:Verdana;
        font-size:10pt;
      }
    </style>
    <script type="text/javascript">
      $(document).ready(function() {
        $('.hidden').focus(function(){
          $(this).css('border', '1px solid #73a6fd');
        }).blur(function(){
          $(this).css('border', '1px solid #888888');
        });
      });
    </script>
    <!--[if IE 7]>
    <style type="text/css">

      .regselectdiv{
        position:relative;
        display:inline;
        padding:5px;
        padding-left:6px;
        border:0px;
        border:1px solid #888888;
        float:left;
        margin-right:7px;
      }

      .selectwrap{
        position:relative;
        border:0px;
        overflow:hidden;
      }

      .arrow{
        position:absolute;
        width:15px;
        height:16px;
        background:url('arrow.png');
        margin-left:-17px;
        border:1px solid #707070;
      }

      .border{
        display:none;
        position:absolute;
        width:15px;
        height:16px;
        border:1px solid #3c7fb1;
        background:none;
        margin-left:-17px;
      }

      .selectwrap:hover .arrow{
        visibility:hidden;
      }

      .selectwrap:hover .border{
        display:inline;
      }

      .hidden{
        margin-top:-2px;
        margin-left:-2px;
        line-height:5px;
        padding:0px;
      }
    </style>
    <script type="text/javascript">
      $(document).ready(function() {

        $('.hidden').wrap('<div class="regselectdiv"><div class="selectwrap">');

        $('.border, .selectwrap').live('mouseleave', function(){
          $('.arrow').show();
        });

        $('.hidden').focus(function(){
          $(this).parent().parent().css('border', '1px solid #73a6fd');
        }).blur(function(){
          $(this).parent().parent().css('border', '1px solid #888888');
        });

        $('.selectwrap').each(function() {
          wrapper($(this));
        });

        function wrapper(x) {
          var arrow = "<div class='border'></div><div class='arrow'></div>";
          x.append(arrow);
          var height = x.find('select').height();
          var width = x.find('select').width();
          x.width(width+2);
          x.height(height);
        }
      });
    </script>
    <![endif]-->

  </head>
  <body>
    <select class='hidden'>
      <option>Month:</option>
      <option>Jan</option>
    </select>
    <select class='hidden'>
      <option>Day:</option>
      <option>1</option>
    </select>
    <select class='hidden'>
      <option>Year:</option>
      <option>2011</option>
    </select>
  </body>
</html>

触发选择框以在单击另一个元素时下拉

2 个答案: