3回答

好帮手慕码

2020-04-04

“lcyjerry”同学你好，在官方定义中inner修改输入框按钮的内部、outer修改输入框按钮的外部，其实主要针对表单输入类型为数字时上下箭头修改。

实际上，修改伪元素input::-webkit-outer-spin-button 的属性在视觉上是没有效果的！所以同学修改之后看不出来改变。

虽然通过-webkit-inner-spin-button 就已经可以实现某些修改，但是常用情况会把它们组合在一起，删除表单输入类型为数字时出现的上下箭头：

如下：

另，关于margin的修改，可以如下例子：

建议：如果同学有其他疑问的话， 建议新建自己的提问，以便日后同学对于问题的归纳和总结。

祝学习愉快~

0

好帮手慕码

2020-04-03

“lcyjerry”同学你好，解答如下：

（1）::-webkit-inner-spin-buttonCSS伪元素用于选择器的输入元件的旋转器按钮的内部部分。

::-webkit-outer-spin-buttonCSS伪元素用于选择器的微调按钮的外部部分<input>的元件。

（2）margin:0 意思是清除他的外边距。

祝学习愉快~

0

hcyjerry

h 所以我修改了inner这个组件可以生效，为什么修改了outer这个伪元素却没有效果？他们分别修改的是哪里的样式，你说的一个内部一个外部，我修改属性看不出改变啊？margin也是，我都不知道这个伪元素针对的哪部分在修改，所以margin也不知道在针对什么

h020-04-03

共1条回复

好帮手慕星星

2019-12-22

同学你好，指的是这两部分样式吗？

（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属性去掉。

如果我的回答帮助到了你，欢迎采纳，祝学习愉快~

0

hcyjerry

h 老师这个inner和outer有什么区别？还有为什么要使用margin：0?

h020-04-03

共1条回复