如何给input或textarea⽂字加背景⾊
需求说明
如果要实现⼀个需求,如下图,在⼀个textarea中加⼊⽂字加背景⾊,该怎么处理呢?
答案:“很简单啊!直接给textarea加个background-color的背景颜⾊啊!”
那好,如果实现下⾯的需求呢?并且要求输⼊的时候,也保持这样的样式呢?
答案:“额...这⼜是⼀个前端交互永远不是你想的那么简单的⼩问题了~”
实验⼀下
我们来实验下给textarea加背景⾊。的确很简单,加个样式:
看下效果:
实现思路
我之前也遇到过这类问题,我们很容易想到的就是,使⽤⼀个替换的div+span 可以给span设置颜⾊,
背景来代替输⼊框,
输⼊⽂本的时候div隐藏,输⼊框显⽰;
显⽰⽂本的时候div显⽰(带样式的),输⼊框隐藏;
但是这个⽅法,有⼀点不好,就是在输⼊的时候⽆法显⽰⾼亮的字。
所以在这个⽅法的基础上,还要做⼀些改造和优化 :
html实现用户注册登录代码
划重点,2个元素都不隐藏!根据需求造化元素
1、如果都不隐藏,那么需要在⼀个位置上:将textarea的dom节点浮动显⽰在div元素上,然后设置div的样式特性、⽂字特性都和textarea的⼀致
2、需要显⽰div的就是背景⾊:因此要把div的⽂字设置透明,将textarea的背景⾊设置透明即可
div的字的颜⾊透明度设置透明,显⽰背景⾊
textarea 的背景⾊设置透明,这样就能透出div的背景⾊了前端不易,且⾏且记录~【转载请说明出处,谢谢!】