前言

接触过EasyUI的朋友都知道其警告框就是左边有个三角警告图标,此文所做的效果正是这样。此外,还将示例多行的做法。

一、在input左边加上一个图标(一行)

注:left center定义了图标的位置;transparent定义了背景颜色为透明( background-color的默认值)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css" >
.phone-input{
padding-right:20px;
background:url("http://files.cnblogs.com/files/wql025/warning.gif") no-repeat scroll left center transparent;
}
</style>
</head>

<body>
<input class='phone-input' value="aaa" type="text" id="phone"/> 

</body>
</html>

效果

.phone-input{
padding-right:20px;
background:url("http://files.cnblogs.com/files/wql025/warning.gif") no-repeat scroll left center transparent;
} 

二、在pre中左上角加上一个图标(多行)

注:图标的位置可由英文单词与百分比自由组合,如:0.2% top,前者指水平偏移;后者指垂直偏移;padding: 5px 10px 5px 45px;的第4个值指定了文本与图标的左间距为45px。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
pre {
    /*保留空白符序列,正常地进行换行。*/
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap!important;/* Mozilla, since 1999 *//*最高优先级*/
    white-space: -pre-wrap;/* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /*允许长单词或 URL 地址换行到下一行*/
    background: url("http://files.cnblogs.com/files/wql025/warning.gif") no-repeat scroll left top rgba(232, 229, 221, 0.56);/*scroll: 背景图像会随着页面其余部分的滚动而移动。left top: 左上角*/
    border-radius: 6px 6px 6px 6px;/*设置四个 border-*-radius 属性*/
    box-shadow: 0px 0px 0px 1px rgb(95, 90, 75), 1px 1px 6px 1px rgba(10, 10, 0, 0.5);/*添加边框阴影*/
    color: #333;/*字体颜色*/
    font-family: "微软雅黑","宋体","黑体",Arial;
    font-size: 15px;
    /* padding-left: 99px; */
    /* font-weight: bold; */
    /* height: 65px; */
    line-height: 25px;/*行高--针对于行级*/
    margin: 15px 10px !important;/*上下和右左*//*最高优先级*/
    padding: 5px 10px 5px 45px;/*上右下左*/
    padding-left: 45px;
    /* padding-right: 45px; */
    margin-right: 55px;
    /* text-shadow: 2px 2px 3px rgb(34, 34, 34); *//*文本设置阴影*/
    /* width: 98%; */
}
</style>
</head>
<pre>pre标签,左上角有个图标。pre标签,左上角有个图标。pre标签,左上角有个图标。pre标签,左上角有个图标。pre标签,左上角有个图标。pre标签,左上角有个图标。pre标签,左上角有个图标。pre标签,左上角有个图标。pre标签,左上角有个图标。pre标签,左上角有个图标。pre标签,左上角有个图标。pre标签,左上角有个图标。pre标签,左上角有个图标。pre标签,左上角有个图标。pre标签,左上角有个图标。</pre>
<body>
</body>
</html>

效果

CSS:在input、pre中左边加上一个图标(一行和多行)的更多相关文章

  1. 在input中右边加上一个图标的css样式

    https://blog.csdn.net/ffggnfgf/article/details/43384527

  2. jQuery 判断多个 input checkbox 中至少有一个勾选

    html ( 使用 TP 标签 ) : <volist name="health_tag" id="htag"> <input type=&q ...

  3. jQuery 判断表单中多个 input text 中至少有一个不为空

    html: 名称1:<input class="seasoning_name" type="text" name="seasoning_name ...

  4. 在C#中调用另一个应用程序或命令行(.exe 带参数)&lt;zz&gt;

    在.net中使用system.diaglostics.Process可以用来调用另一个命令行或程序. using   System.Diagnostics;     如果是dos     Proces ...

  5. 实现bootstrap布局的input输入框中的图标点击功能

    使用bootstrap布局可以在input的输入框中添加譬如登录名输入框中的一键清除图标和密码输入框中显示密码的小眼睛图标.如下图: 但是在将图标放入input输入框中,这些小图标是无法获得点击事件的 ...

  6. java—数组乘积输入: 一个长度为n的整数数组input 输出: 一个长度为n的数组result,满足result[i] = input数组中,除了input[i] 之外的所有数的乘积,不用考虑溢出例如 input {2, 3, 4, 5} output: {60, 40, 30, 24}

    /** * 小米关于小米笔试题 数组乘积输入: 一个长度为n的整数数组input 输出: 一个长度为n的数组result,满足result[i] = * input数组中,除了input[i] 之外的 ...

  7. HTML中使用&lt;input&gt;添加的按钮打开一个链接

    在HTML中,<form>表单的<input type="button">可以添加一个按钮.如果想让该按钮实现<a> 的超链接功能,需要如下实现 ...

  8. svg矢量图标在html中的使用, (知识点:1.通过h5中的css实现点击变色,2.一个svg文件包含多个图标)

    svg矢量文件体积小,不变形,比传统的png先进,比现在流行的icon-font灵活.然而在使用过程中还是遇到了很多坑.今天花了一天时间把经验整理出来,以供后来者借鉴.如果您从本文收益,请留言mark ...

  9. css系列(布局):实现一个元素在浏览器中水平、垂直居中的几个方案

    在开发中偶遇需要一个元素垂直居中的需求,之前都是水平居中,垂直居中使用的比较少,经过一通研究,选择了几种相对比较实用的方案分享,抛砖引玉,如有遗漏不足,还望不吝指正. 方案一(IE7下该方案无法实现垂 ...

随机推荐

  1. MD(markdown)语法

    #标题1 ##标题2 段落->空行分隔 `加背景` [超链接](https://www.baidu.com) **加粗** _斜体_ ~~删除线~~ . 列表一 . 列表二 图片: ![alt ...

  2. CSS打造三级下拉菜单

    <html><head><meta http-equiv="Content-Type" content="text/html; charse ...

  3. hadoop namenode多次格式化后,导致datanode启动不了

    jps hadoop namenode -format dfs directory : /home/hadoop/dfs --data --current/VERSION #Wed Jul :: CS ...

  4. PHP中date函数参数详解

    date函数输出当前的时间echo date('Y-m-d H:i:s', time()); // 格式:xxxx-xx-xx xx:xx:xx 第一个参数的格式分别表示: a - "am& ...

  5. tomcat连接数设置

    如何加大tomcat连接数 在tomcat配置文件server.xml中的<Connector ... />配置中,和连接数相关的参数有:minProcessors:最小空闲连接线程数,用 ...

  6. 多台CentOS服务器下实现SSH免密码登录

    ROOT用户下实现SSH免密码登录 第一步:进入目录/root/.ssh $ cd  /root/.ssh/ 执行以下命令,会在当前目录下生成公钥(id_rsa.pub)/私钥(id_rsa)对 第二 ...

  7. 圆角矩形shader

    在游戏中,有时需要对一张矩形图片进行切割,绘制成圆角矩形. circelrect.vert attribute vec4 a_position; attribute vec4 a_normal; at ...

  8. Java并发编程:Java的四种线程池的使用,以及自定义线程工厂

    目录 引言 四种线程池 newCachedThreadPool:可缓存的线程池 newFixedThreadPool:定长线程池 newSingleThreadExecutor:单线程线程池 newS ...

  9. STM32串口打印输出乱码的解决办法

    前言 最近在试用uFUN开发板,下载配套的Demo程序,串口数据输出正常,当使用另一个模板工程,调用串口printf调试功能时,输出的却是乱码,最后发现是外部晶振频率不一样.很多STM32开发板都是使 ...

  10. python--yield and generator(生成器)简述

    1.想象一个场景:       设想,我想要100个素数,然后对它们累加求和. 通常的想法是,找一个一次性至少能提供100个素数的工具(函数),让它把这100个素数交给我(用return 一次性返回含 ...