技術標籤：vuecsshtml

最終效果如下圖

採用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;
        }
 

記錄下