Question

这适用于文本输入：

$('input:text').focus(
    function () {
        $(this).css({ 'border-color': '#66CCFF' });
        $(this).css({ 'box-shadow': '0px 0px 10px #66CCFF'});
    });

如何进行下拉？我在选项卡路线上有3个下拉选项，但我似乎无法设置边框或背景。我会成为一个盒子阴影的讨厌者，但如果这不起作用，背景就可以了，或者只是一个更厚的边框。我似乎无法得到任何工作。有关焦点/模糊的常规文本输入（它位于_Layout.cshtml文件中的document.ready内）。

但是简单的警报甚至不适用于下拉。复选框也不错。

$('input:select').focus(
    function () {
        alert("inside select");

    });

$('input:checkbox').focus(
    function () {
         alert("inside checkbox");

    });

Answer 1

你可以使用一些css hack - 将你的选择框放在某个div中，使selectbox具有透明背景并在聚焦时，将class .focus添加到父div。

像这样的东西

<强> HTML

<div class="wrap">
  <select>
    <option>test 1</option>
  </select>
</div>

<强> CSS

select {
   background: transparent;
   border: none;
}
.wrap {float: left;}
.focused {
   background: yellow;
   border: 1px solid #336699;
}

<强> JS

$('select').on('focus', function() {
   $(this).closest('.wrap').addClass('focused');
});

DEMO http://jsfiddle.net/R5PXH/477/

以下是一些如何使用纯css

制作自定义选择框的链接

http://codepen.io/ericrasch/pen/zjDBx

https://coderwall.com/p/w7npmq/fully-custom-select-box-simple-css-only

如果您还有任何问题，请告诉我

当具有焦点时，突出显示或更改@ Html.DropDownList的边框或背景

1 个答案: