CSS input输入框

HTML： 

<!-- 原生 最简 -->
<input type="text" placeholder="请输入您的内容">


<!-- 绑定数据 -->
<input class="type-fill" type="text" v-model="gapInputValue" placeholder="请输入您的内容" @input="fillOver()">

JS: 

<script>
export default {
	name: "survey",
	data() {
		return {
			surveyData: {}, // 数据
			gapInputValue: '', // 填空题数据
			
		};
	},
	methods: {

		// 填空
		fillOver() {
			this.nextParams = {

				b: this.gapInputValue,
			
			};
			this.checked = true;
		},
	
		// 下一题
		nextQuestion() {
			if (this.checked == true) {
				if (this.isShowInput && (this.aa.b === '' || this.aa.b=== undefined)) {
					this.$message({
						message: "请先进行作答！！",
						duration: 1000
					});
					return;
				}
				this.getSurvey();
				this.aa= {
					b: '',
					c: '',
				};
			} else {
				this.$message({
					message: "请先进行作答！！",
					duration: 1000
				});
			}
			
		},
		
		// 获取题目
		getSurvey() {
			this.post(this.api.getSurvey, this.aa)
				.then(res => {
					if (res.data.data.length <= 0) {
						return;
					}
					
				})
				.catch(err => {
					console.log(err);
				});
		}
	},
	mounted() {
		this.getSurvey();
	}
};//
</script>

 CSS：

<style lang="less" scoped>
    <!-- 原生 -->
    input {
			max-width: 548px;
			border: 1px solid rgba(47, 116, 255, 0.1);
			border-radius: 10px;
			padding: 27px;
			outline: none; // 去除原生样式

			&::-webkit-input-placeholder {
				color: #889ab8; // 提示词样式
			}
	}
    <!-- 获取光标时的填写状态 -->
     input:focus{ 
            // border: 2px solid #857AAF !important;
            border: 2px solid #5369df;
            border-radius: 10px;
            outline: 0;
     }
</style>