图标或者其他放置在输入框内部（布局）

最新推荐文章于 2025-09-04 16:57:43 发布

原创最新推荐文章于 2025-09-04 16:57:43 发布 · 424 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

在这里插入图片描述

<view class="custom-input-container">
			<span class="currency">￥</span>
			<input class="uni-input" type="text" placeholder="请输入金额" />
		</view>

<style lang="scss">
.custom-input-container {
		position: relative;
	}

	.currency {
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		color: #3C9CFF;
		margin-left: 19px;
		position: absolute;
		left: 10px;
		/* 调整位置以匹配您的设计 */
		top: 50%;
		transform: translateY(-50%);
		/* 垂直居中 */
		font-size: 18px;
		/* 字体大小 */
		pointer-events: none;
		/* 确保点击事件能够穿透到input */
	}
	/deep/ .uni-input-placeholder {
		color: #3C9CFF;
	}

	.uni-input {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 20px;
		padding-left: 40px;
		/* 确保有足够的空间给currency span */
		border: none;
		/* 移除默认边框 */
		width: 100%;
		/* 填充整个容器 */
		box-sizing: border-box;
		/* 包括padding和border在width内 */
		outline: none;
		/* 移除聚焦时的轮廓 */
		margin: 14px;
		width: 347px;
		height: 70px;
		background: rgba(60, 156, 255, 0.06);
		border-radius: 8px 8px 8px 8px;
		border: 2px solid #3C9CFF;
	}
</style>