最近我在学HTML5，发现了一些高级又酷炫的全新input输入形式，让网页看起来更像科技范儿，操作上也超级舒服。于是我就想探究一下这些新玩意儿，看看如何运用它们来提升网站的颜值。
range类型的滑块输入
HTML5的那个range类型超级给力！直接拖动滑块就可以选择数字大小了哟~滑块上有三个参数，分别是最小值（min）、最大值（max）和当前值（value）。这个功能特别适用像调节亮度、音量这种场合。例如，看视频时我就让大家通过range输入来调整音量，这样听起来更舒服，也便于控制声音大小哒。
search类型的搜索框
这就是那个专门在网上找东西的神奇搜索框，比如说，你想找个什么东西，网页上有个这个搜索框，就方便多了。它旁边还有个小小的小按钮，看起来真是专业极了。只要稍微调一下CSS格式，它就能跟整个网站融为一体，让你用着更舒心。
input[type="search"]{
-webkit-appearance:textfield;
}
tel类型的电话输入验证
虽然现在用tel类的输入方式在浏览器里可能有点卡，但我觉得这玩意儿前途无量。输入这东西就是用来确认你填写的是否为电话号码的，比如说手机号啥的。想像一下，将来无论是手机还是哪里需要输入电话号，大家都能用这个输入法，那填写表格得多容易，多准确
color类型的颜色拾取器
这个color类的input有个自动颜色选择功能，简单易上手，设计师们常用到。比如说那些网上的图形设计工具和颜色选色器。我之前就在一个项目中尝试用了这种样式，结果用户们都觉得很好用，工作效率也提升了很多！
datalist与输入域的绑定
你知道？用这个”dataList”元素，你可以为输入框提供预先设定的选项！只要让input的”list”属性跟”datalist”的”id”对应上，那么用户在输入时就会看到一个下拉菜单，里面全是他们可能会选的内容。这种方式特别适合我们需要用户从一堆选项中挑选一个的场景，比如选择国家、城市或者产品类别等等。
output元素的脚本输出应用
box-shadow: 20px 10px 0 #000;
输出元素就是显示我们运算或者执行完脚本之后的结果，用这个做网页元素很实用。比如做个简单的计算器，就能马上告诉用户答案。这样不仅让用户觉得方便，还能让网页变得更有意思。
border: 10px solid #000; -moz-border-bottom-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-top-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-left-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc; -moz-border-right-colors: #555 #666 #777 #888 #999 #aaa #bbb #ccc;
浏览器兼容性与前缀的使用
-moz-border-image: url(exam.png) 20 20 20 20 repeat; -webkit-border-image: url(exam.png) 20 20 20 20 repeat;
HTML5新东西新颖又炫，不过兼容性有点难搞。为保证网页能在各类浏览器上稳定运行，得加些特别的前缀，比如-o-这是给苹果电脑浏览器用的。虽然麻烦了点儿，但为了给你们提供更好的浏览体验，辛苦也是值得滴！
CSS3的新增属性应用
有了新的HTML5输入类型和CSS3，我们就能做出更炫酷的页面前景！比如说，用图像边框给文本域加个个性化边框，整个页面立刻就不一样！
box-sizing属性与盒模型控制
你知道box-sizing是干嘛的吗？就是弄清楚盒子模型到底怎么回事儿。有时候我想让元素的宽度不变，不受padding和border的影响，这时候就得用到box-sizing，把它设成content-box。这样一来，网页布局就更精确了，设计起来也更顺手了！
简而言之，HTML5的新input类型和CSS3的新属性能让网页变得更好看好用。虽然有些浏览器可能还有适配问题，但只要搞定设计和加上前缀，就可以做出既好看又好用的页面！希望你们也能试试这些新玩意儿，让我们的网页设计更上一层楼。你试过这些新input类型没？感觉如何？快到评论区说说，别忘了点赞分享文章，一起推动网页设计的进步
text-overflow: inherit | ellipsis | clip ;
评论0