input框的样式和文字placeholder的样式

4 15 20 1C

于 2022-04-27 10:43:15 发布

阅读量229

点赞数

文章标签： css3 html5 vue.js 前端 css

本文链接：https://blog.youkuaiyun.com/M40153c/article/details/124445414

版权

做到像上图的样式

<view class="input">
      <view class="left">
        <u-icon name="search" color="#355E92" size="48" class="icon"></u-icon>
        <input class="input1" type="search" placeholder="输入关键词进行搜索" />
      </view>
      <view class="right">搜索</view>
    </view>

u-icon可以换成img

对于文字placeholder的样式我们可以直接给input一个类如上class=“input1”

.input1 {
      margin: 18rpx 0 0 12rpx;
      font-size: 24rpx;
      text-align: left;
      }

可以通过text-align属性控制placeholder的位置和光标的位置