如何给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的背景⾊了前端不易，且⾏且记录~【转载请说明出处，谢谢！】

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。