# 小程序开发工程师 经验记录 - 2026-02-27

---

## 输入框 padding 最佳实践

- **场景**：设置 input 的 padding、背景、边框等样式时，直接作用于 input 可能导致光标被截断、布局异常。
- **方案**：用 `<view>` 包裹 `<input>`，padding/背景/边框写在 view 上，input 仅设置 width、font-size、color 等文字相关样式。
- **示例**：
  ```xml
  <view class="form-input">
    <input placeholder="提示文字" value="{{value}}" bindinput="onInput" />
  </view>
  ```
  ```css
  .form-input { padding: 16rpx 24rpx; background: rgba(255,255,255,0.06); border: 1rpx solid rgba(255,255,255,0.1); border-radius: 12rpx; }
  .form-input input { width: 100%; font-size: 28rpx; color: #fff; background: transparent; }
  ```
- **升级**：已写入 SKILL-小程序开发 §6 表单与输入框