框左边加一个小图标,css样式应该怎么写

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了框左边加一个小图标,css样式应该怎么写相关的知识,希望对你有一定的参考价值。

输入框吧?方法很多给两种供选择。
输入框左侧加一个缩进(padding-left)空出图标空间,
1.如果图标是图片文件,作为输入框的背景图,不重复(no-repeat),通过background-position调整图标位置
2.如果是字体图标,跟输入框放在同一个容器里,通过绝对定位,移动到相应位置

当然,图片文件的图标也可以用方法2,这样就能用雪碧图了
参考技术A 你说的是类似于用户登录注册那种界面上的吗

CSS:在inputpre中左边加上一个图标(一行和多行)

前言

接触过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>

效果

技术分享

二、在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样式应该怎么写的主要内容,如果未能解决你的问题,请参考以下文章

bootstrap输入框设置问题

css 标题文字前面加小图标,如何使它们不错位?

网页的title左边的小图片怎么添加

html和css制作一个搜索框,要内容与搜索图标结合,该怎么做?

引用阿里巴巴字体图标写在外部样式为啥显示一个框?

用css怎么写菜单上面的小三角