有没有办法从输入类型中删除箭头,但将其范围仅限于特定组件?

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 的影响。这是设计使然,以便父级可以为子根元素设置样式以进行布局。

这里的问题是&lt;input&gt; 不确定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>

【讨论】:

以上是关于有没有办法从输入类型中删除箭头,但将其范围仅限于特定组件?的主要内容,如果未能解决你的问题,请参考以下文章

从 git 分支中删除文件但将其保留在另一个?

Postgres 查询在控制台上工作,但将其用作视图中的范围会呈现语法错误

将Python函数范围仅限于局部变量

SVN 从存储库中删除更改,但将它们保留在我的结帐中?

有没有办法请求特定于存储桶的读取范围?

如何在构建时忽略 .sql 文件,但将其包含在架构比较中