老师写的那些样式,之前好像没学过,有讲过吗?不太明白是什么意思
老师写的那些样式,之前好像没学过,有讲过吗?不太明白是什么意思
正在回答 回答被采纳积分+1
“lcyjerry”同学你好,在官方定义中inner修改输入框按钮的内部、outer修改输入框按钮的外部,其实主要针对表单输入类型为数字时上下箭头修改。
实际上,修改伪元素input::-webkit-outer-spin-button 的属性在视觉上是没有效果的!所以同学修改之后看不出来改变。
虽然通过-webkit-inner-spin-button 就已经可以实现某些修改,但是常用情况会把它们组合在一起,删除表单输入类型为数字时出现的上下箭头:

如下:


另,关于margin的修改,可以如下例子:


建议:如果同学有其他疑问的话, 建议新建自己的提问,以便日后同学对于问题的归纳和总结。
祝学习愉快~
同学你好,指的是这两部分样式吗?

(1)search类型的input框,输入内容的时候后面会有一个x:

::-webkit-search-cancel-button这个伪类是用来设置x按钮的,-webkit-appearance属性用来设置是否显示,视频中设置为none,也就是不显示:


(2)::-webkit-inner-spin-buttonCSS伪元素用于选择器的输入元件的旋转器按钮的内部部分。
::-webkit-outer-spin-buttonCSS伪元素用于选择器的微调按钮的外部部分<input>的元件。
例如number类型的input框,里面有上下箭头:

可以通过这两个伪类加上-webkit-appearance属性去掉。
如果我的回答帮助到了你,欢迎采纳,祝学习愉快~
- 参与学习 人
- 提交作业 622 份
- 解答问题 6815 个
微信带火了小程序,也让前端工程师有了更多的展现机会,本阶段带你从移动基础知识的学习到webAPP开发,及小程序开发,让你PC端与移动端两端通吃。
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星