表单元素不可修改 [英] Form elements that aren't styleable

问题描述

这里是小提琴。我正在制作不可风格化的自定义表单元素。我想知道哪些表单元素是不可修改的，所以我可以创建它们自定义的元素。

当前的JS / JQuery：

  $（document）.ready（function（）{
 $（'ol'）。hide（）; 
 $（'＃click'） .click（function（）{
 $（this）.toggleClass（'down'）; 
 $（'ol'）。toggle（）; 
'（'。l'）。点击（函数（）{
 var l = $（this）.html（）; 
 $（'＃click'）。html（l +'& blacktriangledown;'）; 
 }）; 
}）; 
}）; 
  

HTML：

 < div id ='click'> &安培; blacktriangledown;< / DIV> 
< div id ='list'> 
< ol> 
< li class ='l'> Hello< / li> 
< li class ='l'> Hola< / li> 
< li class ='l'> Bonjour< / li> 
< / ol> 
< / div> 
  

（这个问题对于做同样事情的人很有用。）

解决方案

不完全音节的表单元素包括：

input [type = checkbox]

input [type = radio]

input [type = file]

>

input [type = color]

input [type = date]

li>

输入[type = datetime-local]

输入[type = time]

input [type = month ]

输入[type = week]

选择

选择[multiple]

需要浏览器特定样式的表单元素：

• input [type = seach]


• 输入[type = number]

另外请注意，有插件和替代所有这些样式/变通办法，他们都很好。如果您打算更换这些设备，则需要记住针对残疾人的键盘控件和ARIA属性。

Here is the fiddle. I am making custom form elements that aren't styleable. I am wondering what form elements aren't styleable so I can create them a custom one.

Current JS/JQuery:

$(document).ready(function () {
    $('ol').hide();
    $('#click').click(function () {
        $(this).toggleClass('down');
        $('ol').toggle();
        $('.l').click(function () {
            var l = $(this).html();
            $('#click').html(l + ' ▾');
        });
    });
});

HTML:

<div id='click'> &blacktriangledown;</div>
<div id='list'>
    <ol>
        <li class='l'>Hello</li>
        <li class='l'>Hola</li>
        <li class='l'>Bonjour</li>
    </ol>
</div>

(This question is useful for people doing the same thing I am.)

解决方案

Form elements that are not completely syllable are:

• input[type=checkbox]
• input[type=radio]
• input[type=file]
• input[type=color]
• input[type=date]
• input[type=datetime]
• input[type=datetime-local]
• input[type=time]
• input[type=month]
• input[type=week]
• select
• select[multiple]

Form elements that require browser specific styling:

• input[type=seach]
• input[type=number]

Also note, there are plugins and workarounds for styling/replacing all of these already, and they are pretty good. If you plan on replacing these, you need to remember keyboard controls and ARIA attributes for people with disabilities.

这篇关于表单元素不可修改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！