有没有办法从输入类型中删除箭头,但将其范围仅限于特定组件?
Posted
技术标签:
【中文标题】有没有办法从输入类型中删除箭头,但将其范围仅限于特定组件?【英文标题】:Is there a way to remove the arrows from an input type but keeping it scoped to only a specific component? 【发布时间】:2021-06-06 09:56:51 【问题描述】:我想从我的输入字段中删除箭头,但我想将其范围仅限于该组件的文本字段。
<v-text-field
class="inputPrice"
type="number"
v-model="$data._value"
@change="sendValue"
>
</v-text-field>
<style scoped>
.inputPrice input[type='number']
-moz-appearance:textfield;
.inputPrice input::-webkit-outer-spin-button,
.inputPrice input::-webkit-inner-spin-button
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
</style>
my text field
我尝试使用这个解决方案来解决一个有点类似的问题:https://github.com/vuejs/vue-loader/issues/559#issuecomment-271491472
还有这个:https://github.com/vuetifyjs/vuetify/issues/6157#issue-399264114
但它们似乎并没有真正发挥作用。
【问题讨论】:
【参考方案1】:scoped
样式旨在仅影响组件本身,不影响子组件。
Docs
使用
scoped
,父组件的样式不会泄漏到子组件中。但是,子组件的根节点会同时受到父级的作用域 CSS 和子级的作用域 CSS 的影响。这是设计使然,以便父级可以为子根元素设置样式以进行布局。
这里的问题是<input>
不确定v-text-field
的根元素
您可能可以尝试使用链接问题中提到的深度选择器,但是如果需要特定类的应用程序来触发行为,是否有任何理由使用范围样式?
Working codepen(没有scoped
stypes)
以下是使用范围样式的方法:
<style scoped>
.inputPrice >>> input[type="number"]
-moz-appearance: textfield;
.inputPrice >>> input::-webkit-outer-spin-button,
.inputPrice >>> input::-webkit-inner-spin-button
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
</style>
【讨论】:
以上是关于有没有办法从输入类型中删除箭头,但将其范围仅限于特定组件?的主要内容,如果未能解决你的问题,请参考以下文章