今天在项目中遇到一个css问题,描述如下:
页面有个内容为font-weight的各选项值的下拉框列表,如图:
它的源码:
<select id="ue_richbox_weight" style="width:80px;height:20px;margin:0 2px;" onchange="UEditor.menu_click(this,'style',{fontFamily: this.value});"><option value="Lighter" style="font-weight:lighter">Lighter</option><option value="100" style="font-weight:100">100</option><option value="200" style="font-weight:200">200</option><option value="300" style="font-weight:300">300</option><option value="400(nomal)" style="font-weight:400">400(nomal)</option><option value="500" style="font-weight:500">500</option><option value="600" style="font-weight:600">600</option><option value="700(bold)" style="font-weight:700">700(bold)</option><option value="800" style="font-weight:800">800</option><option value="900" style="font-weight:900">900</option><option value="Bolder" style="font-weight:lighter">Bolder</option></select>
用这个吧!
<select> <optgroup label="123123" style="font-weight:bold">123123</optgroup> <option value="Lighter" style="font-weight:lighter"> Lighter </option></select>
用这个吧!
<select> <optgroup label="123123" style="font-weight:bold">123123</optgroup> <option value="Lighter" style="font-weight:lighter"> Lighter </option></select>
那就不要用select标签了
那就不要用select标签了
这不是优先级的问题,是浏览器根本不支持某元素设置某些样式。
你别的元素做个模拟的下拉框好了
这不是优先级的问题,是浏览器根本不支持某元素设置某些样式。
你别的元素做个模拟的下拉框好了
这不是优先级的问题,是浏览器根本不支持某元素设置某些样式。
你别的元素做个模拟的下拉框好了
别纠结了。。。
最开始浏览器出于安全考虑不允许对表单控件的某些样式修改,避免网页欺骗用户诱导用户做出错误的行为。
option 是内部属性,是不能直接修改的,有些样式可以通过父元素select修改,有些得有JS才行。
你想修改option样式,可以通过模拟或者JS等其他方法修改。
你非要内嵌这个东西,除非你去让人家重新定义标准。。。。
你非要内嵌这个东西,除非你去让人家重新定义标准。。。。
恩恩 我也试过了 偏偏就是这个不行,,这也没办法,人家浏览器就是这么规定的。
算了,结帖了,现在看来,多半是w3c标准执行中的一个bug吧,不知道会不会被修复。