需求说明

如果要实现一个需求,如下图,在一个textarea中加入文字加背景色,该怎么处理呢?

答案:“很简单啊!直接给textarea加个background-color的背景颜色啊!”

那好,如果实现下面的需求呢?并且要求输入的时候,也保持这样的样式呢?

答案:“额...这又是一个前端交互永远不是你想的那么简单的小问题了~”

实验一下

我们来实验下给textarea加背景色。的确很简单,加个样式:

看下效果:

实现思路

我之前也遇到过这类问题,我们很容易想到的就是,使用一个替换的div+span 可以给span设置颜色,背景 来代替输入框,

输入文本的时候div隐藏,输入框显示;

显示文本的时候div显示(带样式的),输入框隐藏;

但是这个方法,有一点不好,就是在输入的时候无法显示高亮的字。

所以在这个方法的基础上,还要做一些改造和优化:

划重点,2个元素都不隐藏!根据需求造化元素

1、如果都不隐藏,那么需要在一个位置上: 将textarea的dom节点浮动显示在div元素上,然后设置div的样式特性、文字特性都和textarea的一致

2、需要显示div的就是背景色:因此要把div的文字设置透明,将textarea的背景色设置透明即可



div的字的颜色透明度设置透明,显示背景色



textarea 的背景色设置透明,这样就能透出div的背景色了

前端不易,且行且记录~【转载请说明出处,谢谢!】

如何给input或textarea文字加背景色的更多相关文章

  1. 使用JQuery统计input和textarea文字输入数量代码

    本文主要介绍了jQuery实现统计输入文字个数的方法,需要的朋友可以参考下. HTML部分: <input type="text" value="我是输入的文字&q ...

  2. vue.js中,input和textarea上的v-model指令到底做了什么?

    v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能: 对,它本质上只是一个语法糖,但到底是一 ...

  3. 从vue.js的源码分析,input和textarea上的v-model指令到底做了什么

    v-model是 vue.js 中用于在表单表单元素上创建双向数据绑定,它的本质只是一个语法糖,在单向数据绑定的基础上,增加了监听用户输入事件并更新数据的功能:对,它本质上只是一个语法糖,但到底是一个 ...

  4. 去掉谷歌浏览器获取焦点时默认的input、textarea的边框和背景

    去掉chrome(谷歌)浏览器默认的input.textarea的边框(border)和背景(background) 及chrome下不可更改textarea大小 1.使用Chrome的都知道,当鼠标 ...

  5. chrome、safari中的input或textarea

    1.去掉chrome.safari input或textarea在得到焦点时出现黄色边框的方法 input{ outline:0;} 2.去掉chrome.safari textarea右下角可拖动鼠 ...

  6. input,textarea在ios和Android上阴影和边框的处理方法(在移动端)

    1.去掉ios上阴影的方法只需要在css文件上添加input,textarea{-webkit-appearance: none;}就可以了 2.在移动端上input和textarea边框问题,也是在 ...

  7. 去掉chrome、safari input或textarea在得到焦点时出现黄色边框的方法

    1.去掉chrome.safari input或textarea在得到焦点时出现黄色边框的方法 input{ outline:0;} 2.去掉chrome.safari textarea右下角可拖动鼠 ...

  8. CSS去除input和textarea点击选中框

    1.去除chrome等浏览器默认发光边框 input:focus, textarea:focus { outline: none; } 这样textarea在选中的时候,文字会有点移动,解决方法: i ...

  9. 取消chrome浏览器下input和textarea的默认样式;html5默认input内容清除“&#215;”按钮去除办法

    取消chrome浏览器下input和textarea的默认样式: outline:none;/*清空chrome中input的外边框*/ html5默认input内容清除“×”按钮去除办法: inpu ...

  10. 刷新各ifream当前页,下拉项改变触发事件js,给选中项加背景色js

    <script type="text/javascript" language="javascript"> //刷新框架各页面 function r ...

随机推荐

  1. Webpack 中文指南

    来源于:http://webpackdoc.com/index.html Webpack 是当下最热门的前端资源模块化管理和打包工具.它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资 ...

  2. 【转载】java版打字练习软件

    网上找到一个java版的打字的游戏 import java.applet.Applet; import java.applet.AudioClip; import java.awt.Dimension ...

  3. (自用)专业排版套装:CTeX + TeXStudio

    \documentclass[UTF8,landscape]{ctexart}%UTF8,ctexart中文支持,landscape横向版面 \usepackage{tikz}%画图 \usepack ...

  4. spring源码 — 一、IoC容器初始化

    IoC容器初始化 注意:本次的spring源码是基于3.1.1.release版本 容器:具有获取Bean功能--这是最基本功能,也是BeanFactory接口定义的主要行为,在添加了对于资源的支持之 ...

  5. oracle创建用户,修改用户,删除用户等关于用户的

    --直接修改底层表 USER$ 更换用户名 1.windows 平台下运行 cmd 2.sqlplus /nolog 3.SQL> conn SYSTEM/123@ORCL as sysdba ...

  6. HTML Music Entities/音乐符号

    HTML Music Entities Musical symbols Description Character(click) HTML-Entity Code-Decimal Code-Hex Q ...

  7. 面向对象设计模式之Facade外观模式(结构型)

    动机:有些系统组件的客户和组件中各种复杂的子系统有了过多的的耦合,随着外部客户程序  和个子系统的演化,这种过多的耦合面临很多变化的挑战:如何简化外部客户程序和系统的交互接口?  如何将外部客户程序的 ...

  8. 从以往子类化跟踪MouseLeave深入讨论VB6的自定义Hook类

    一.关于起因 之前发过一篇博文,是关于VB6中跟踪鼠标移出事件的示例(http://www.cnblogs.com/alexywt/p/5891827.html) 随着业务状况的不断发展,提出了更多的 ...

  9. 使用ThinkPHP的扩展功能

    文件上传类的代码位于“\ThinkPHP\Libabry\Think\Uplod.class.php”,实例化电偶用即可.1:在Home模块Index控制器test方法中实现文件上传功能.打开文件\A ...

  10. ubuntu安装docker-ce

    Docker Community Edition (CE)/Docker社区版非常适合希望开始使用Docker并尝试使用基于容器的应用程序的开发人员和小型团队.Docker CE有2个版本:stabl ...