uniapp input显示边框

要在uniapp中显示一个带有边框的输入框，你可以使用uniapp提供的内置样式和属性。下面是一个简单的示例代码：

<template>
  <view>
    <input class="input-box" placeholder="请输入内容" />
  </view>
</template>

<style>
.input-box {
  border: 1px solid #ccc;
  padding: 5px;
}
</style>

在上面的代码中，我们使用了`input`组件创建一个输入框，并给它添加了一个名为`input-box`的类，然后在样式中定义了这个类的样式规则。通过设置`border`属性为`1px solid #ccc`，我们给输入框添加了一个1像素宽度的灰色边框。`padding`属性用于设置输入框的内边距，以增加输入框与边框之间的间距。

你可以根据需要修改样式规则来自定义输入框的边框样式和其他样式属性。

相关问题

uniapp input下划线

要给UniApp中的Input组件添加下划线，可以使用以下方法：

1. 在样式中设置边框样式为下划线：

/* 在全局样式中或者组件的样式中添加以下代码 */
.input-underline {
  border: none;
  border-bottom: 1px solid #000; /* 下划线颜色可以根据需求修改 */
}

2. 在Input组件中添加对应的类名：

<template>
  <input class="input-underline" />
</template>

这样就给Input组件添加了一个下划线样式。你可以根据需要修改下划线的颜色和样式。

uniapp input输入框点击发送按钮后隐藏怎么还显示一个空白是边框

你可以在发送按钮的点击事件中，手动调用输入框的 `blur()` 方法，来隐藏输入框并且让边框消失。

例如：

<template>
  <view>
    <input v-model="message" ref="input" />
    <button @click="sendMessage">发送</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    sendMessage() {
      // 发送消息的逻辑

      // 隐藏输入框并让边框消失
      this.$refs.input.blur()
    }
  }
}
</script>