css实现input框前固定文字记录

最终效果如下图

采用input+label标签实现

1、html代码

<label class="label">联系方式：</label>
<input class="input-style text-in2" value="" v-model="tel" />

2、css代码

.label {
          font-size: 19px;
          font-family: 'SourceHanSansCN-Medium';
          font-weight: 400;
          color: #dee0e4;
          line-height: 45px;
          position: absolute;
          margin-left: 7px;
        }
// 设置input光标起始位置，根据实际情况自行调整
.text-in2 {
          text-indent: 98px;
        }
.input-style {
          height: 40px;
          width: 480px;
          outline-style: none;
          border: 1px solid #ee7800;
          background: transparent;
          font-size: 19px;
          font-family: 'SourceHanSansCN-Medium';
          font-weight: 400;
          color: #dee0e4;
        }

记录下