uniapp 输入框样式 - 好看实用的设计案例

以下是几个常见的好看的输入框样式：

1. 圆角输入框：

<uni-input placeholder='请输入内容' type='text' class='round-input'></uni-input>

.round-input {
  border-radius: 20px;
  border: none;
  padding: 10px 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, .2);
}

2. 边框输入框：

<uni-input placeholder='请输入内容' type='text' class='border-input'></uni-input>

.border-input {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px 20px;
}

3. 下划线输入框：

<uni-input placeholder='请输入内容' type='text' class='underline-input'></uni-input>

.underline-input {
  border: none;
  border-bottom: 1px solid #ccc;
  padding: 10px 20px;
}

4. 渐变输入框：

<uni-input placeholder='请输入内容' type='text' class='gradient-input'></uni-input>

.gradient-input {
  background: linear-gradient(to right, #ff6b6b, #ffa726);
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  color: #fff;
}