怎么调整select框得宽度和高度_教程

1、首先，我们新键一个Winform窗体应用程序，然后在界面上，放置一个下拉框。

2、之后根据下方的图片中的代码进行编辑。

3、然后在属性面板的界面中，点击选上DropDownHeight选项。

4、接下来设置想要的宽度，例如300，效果图如下：

5、接下来继续设置数值为100，

6、之后的效果就是下图中的样子。

select属于浏览器内置组件，标准CSS无法调整其样式。

你可以使用div来模拟select。

首先创建一个<div />来模拟下拉框。

然后在里面加上显示选中值的<div />和模拟三角的<div />以及下拉列表<ul />

</div>

你可以用CSS来设置自己喜欢的样式。

接下来就是用Javascript来控制模拟的下拉框了。（这里为了方便，使用了jQuery）

// 创建临时DOM，内容为模拟的下拉框（其中省略的部分为上面写的html代码）

var $mySelect = $('<div class="mySelect">...</div>')

// 把原来select有的样式复制到模拟的下拉框上

$mySelect.attr('class', $('#select').attr('class'))

$mySelect.attr('style', $('#select').attr('style'))

// 把原来select的选项复制到模拟的下拉框中

$('#select option').each(function () {

var value = $(this).attr('value'),

name = $(this).html()

$mySelect.find('.mySelectOptions').append('<li class="mySelectOption" data-id="' + value + '">' + name + '</li>')

})

// 在模拟下拉框中设置选中的值

$mySelect.find('.mySelectValue').html($('#select option:selected').html())

// 隐藏原有的select

$('#select').hide()

// 给模拟的下拉框绑定事件

$mySelect

.on('click', function (e) {

// 阻止点击事件向上冒泡

e.stopImmediatePropagation()

// 反转下拉列表的显示

$('.mySelectOptions', this).toggle()

// 给原有的select模拟点击事件

$('#select').trigger('click')

})

.on('click', '.mySelectOption', function (e) {

// 阻止点击事件向上冒泡

e.stopImmediatePropagation()

// 把选中的值显示到模拟的下拉框中

$mySelect.find('.mySelectValue').html($(this).html())

// 隐藏下拉列表

$mySelect.find('.mySelectOptions').hide()

// 把选中的值给到原来的select中

$('#select').val($(this).data('id'))

// 给原来的select模拟change事件

$('#select').trigger('change')

})

// 基本功能就到此了。其中可以缓存jQuery对象来优化，还能添加焦点事件，键盘事件等，按自己的需求慢慢修改吧。

定义html中<select>标签长度，可以使用Css样式进行设置，代码如下：

<!DOCTYPE html>

<html>

<head>

<title>Select标签长度</title>

select{width:100px}

</style>

</head>

<body>

</select>

</body>

</html>

说明：

使用CSS样式来定义<select>标签的长度，示例定义为100px的长度。

完整代码在附件中。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/tougao/11322327.html

怎么调整select框得宽度和高度

发表评论

评论列表（0条）