20 lines
853 B
Markdown
20 lines
853 B
Markdown
# 小程序开发工程师 经验记录 - 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 表单与输入框
|