uniapp 输入@后 去除前面字符的红色下划线

如果您希望去除输入 @ 后前面字符的红色下划线，可以通过修改样式的方式来实现。您可以在对应的页面或组件的样式文件中添加以下样式：

/* 去除 @ 符号前面字符的红色下划线 */
::before {
  border-bottom: none !important;
}

这样就可以去除 @ 符号前面字符的红色下划线了。另外，需要注意的是，这种修改方式可能会影响到其他地方的样式，因此建议仅在需要的地方使用，并且在修改样式前先备份原有样式，以免出现问题。

相关问题

uniapp input 输入邮箱，@符号前面得字符取消红色下划线

要取消@符号前面的字符的红色下划线，你可以在输入时判断输入的字符是否包含@符号，如果包含，则将@符号前后的字符分别包裹在两个span标签中，并将@符号去掉。其中，@符号前面的span标签需要设置text-decoration: none;来取消下划线样式。示例代码如下：

<template>
  <div class="parent">
    <input class="input" type="text" v-model="email" @input="onInput" placeholder="请输入邮箱地址">
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: ''
    }
  },
  methods: {
    onInput() {
      const email = this.email
      const atIndex = email.indexOf('@')
      if (atIndex > 0) {
        const prefix = email.substring(0, atIndex)
        const suffix = email.substring(atIndex + 1)
        const prefixHtml = `<span style="text-decoration: none;">${prefix}</span>`
        const suffixHtml = `<span>${suffix}</span>`
        this.email = prefixHtml + "@" + suffixHtml
      }
    }
  }
}
</script>

<style scoped>
.parent {
  position: relative;
}
.parent:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: red;
  z-index: 1;
}
.input {
  position: relative;
  z-index: 2;
}
</style>

这样就可以实现在输入邮箱时，@符号前面的字符取消红色下划线的效果。

uniapp input 输入邮箱，@符号前面得字符有红色下划线

可以通过在input的父元素上设置position属性为relative，并在其内部添加一个伪元素:before来实现。具体CSS样式如下：

.parent {
  position: relative;
}
.parent:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: red;
  z-index: 1;
}
.input {
  position: relative;
  z-index: 2;
}

然后在input中添加一个v-model指令用于绑定输入的邮箱地址，然后使用JavaScript的正则表达式来匹配@符号前面的字符，并将其包裹在一个span标签中，并设置该span标签的样式为红色下划线。示例代码如下：

<template>
  <div class="parent">
    <input class="input" type="text" v-model="email" @input="onInput" placeholder="请输入邮箱地址">
  </div>
</template>

<script>
export default {
  data() {
    return {
      email: ''
    }
  },
  methods: {
    onInput() {
      const email = this.email
      const atIndex = email.indexOf('@')
      if (atIndex > 0) {
        const prefix = email.substring(0, atIndex)
        const suffix = email.substring(atIndex)
        const spanHtml = `<span style="text-decoration: underline; color: red;">${prefix}</span>`
        this.email = spanHtml + suffix
      }
    }
  }
}
</script>

<style scoped>
.parent {
  position: relative;
}
.parent:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background-color: red;
  z-index: 1;
}
.input {
  position: relative;
  z-index: 2;
}
</style>

这样就可以实现在输入邮箱时，@符号前面的字符带有红色下划线的效果。