vue改造textarea多行文本框样式
vue改造textarea多行文本框样式
·
代码如下(有注释),因为这个是h5,如果需要pc端的,自行把rem乘100转换成px
<template>
<div class="contain">
<textarea
v-model="textareaSeason"
placeholder="请输入具体原因"
class="textarea"
maxlength="40"
></textarea>
<!-- 右下角显示文字 -->
<div class="word-limit">
<span class="green">{{ textareaSeason.length }}</span>/40
</div>
</div>
</template>
<script>
export default {
data () {
return {
textareaSeason: "",
}
},
methods:{
}
}
</script>
<style lang="scss" scoped>
.contain {
position: relative;
}
/* 设置textarea框提示内容的样式 */
.textarea::-webkit-input-placeholder{
font-size: 0.14rem;
font-weight: 400;
color: rgba(0, 0, 0, 0.2500);
}
/*webkit 内核浏览器*/
.textarea::-moz-placeholder{
font-size: 0.14rem;
font-weight: 400;
color: rgba(0, 0, 0, 0.2500);
}
/*Mozilla Firefox 19+*/
.textarea:-moz-placeholder{
font-size: 0.14rem;
font-weight: 400;
color: rgba(0, 0, 0, 0.2500);
}
/*Mozilla Firefox 4 to 18*/
.textarea:-ms-input-placeholder{
font-size: 0.14rem;
font-weight: 400;
color: rgba(0, 0, 0, 0.2500);
}
.textarea {
border: none; // 去除边框
outline: none; // 去除聚焦边框
resize: none; // 去除右下的可拖动
appearance: none; // 去除内阴影样式
padding: 0.12rem; // 增加内边距
box-sizing: border-box;
height: 0.96rem;
background: #EEEEEE;
border-radius: 0.03rem;
width: 100%;
margin-bottom: 0.12rem;
}
// 0/40提示,使用绝对定位
.word-limit {
.green {
color: #00D76E;
}
position: absolute;
right: 0.1rem;
bottom: 0.25rem;
font-size: 0.12rem;
font-weight: 400;
color: #999999;
}
</style>
个人纯原创的公众号:安哥说前端,会分享一些自己在项目上用到的组件、封装、大前端或者业务逻辑知识等,希望大家能关注,谢谢!
更多推荐
已为社区贡献3条内容
所有评论(0)