uniapp输入框加边框

要在uni-app中为输入框添加边框，你可以通过使用样式来实现。可以在组件的style属性中设置边框样式。

以下是一个示例代码，演示了如何为uni-app中的输入框添加边框：

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

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

在上面的示例中，我们通过设置input-box类的样式来添加边框。border属性用于设置边框的样式，可以指定边框的宽度、样式和颜色。padding属性用于设置输入框内部的内边距，border-radius属性用于设置边框的圆角。

你可以根据需要自定义样式，修改示例代码中的边框样式和其他属性来适应你的设计需求。

相关问题

帮我写uniapp输入框样式

在UniApp中，你可以通过WXML和wxss来定制输入框（`<input>`）的样式。下面是一个基本的例子，展示如何设置输入框的宽度、边框、背景颜色以及焦点时的状态：

<!-- WXML -->
<input type="text" placeholder="请输入内容" 
   wx:if="{{isShow}}" style="@apply input-style">

// wxss (uni-app CSS预处理器)
@import '../../common.wxss'; // 引入全局样式

.input-style {
  width: 200rpx; /* 设置输入框宽度 */
  height: 40rpx;
  border: 1px solid #ccc; /* 边框样式 */
  background-color: #fff; /* 背景颜色 */
  border-radius: 5px; /* 圆角 */
  
  &::placeholder { /* 悬浮文字样式 */
    color: #999;
  }

  &:focus { /* 当输入框获取焦点时 */
    outline: none; /* 取消默认轮廓线 */
    border-color: #007aff; /* 更改边框颜色 */
    box-shadow: 0 0 2px rgba(0, 126, 255, .8); /* 添加阴影效果 */
  }
}

在上述代码中，`@apply input-style`会应用自定义的`.input-style`规则到当前输入框上。`wx:if="{{isShow}}"`用于控制输入框是否显示，`isShow`是一个数据绑定属性，可以根据需要动态改变。

uniapp 输入框disabled但是颜色不变

如果你想要禁用 uniapp 中的输入框，但是又想保留输入框原有的样式，可以使用以下方法：

1. 在输入框上添加一个 `disabled` 属性，这将禁用输入框。

2. 使用 CSS 样式来覆盖禁用状态下的默认样式。可以使用以下代码：

input[disabled] {
  opacity: 1;
  cursor: not-allowed;
}

这将使禁用状态下的输入框不透明，并将光标更改为“不允许”图标。

同时，你也可以添加其他样式来自定义禁用状态下的输入框样式，如更改背景色、边框样式等。