input如何添加图标

代码:<input type="text" class="user" />

设置class类属性,添加小图标。创建<style>标签,然后在这个标签里面设置user样式。

1.使用background-image设置input背景图片;

2.background-size设置背景图片的大小;

3.background-position设置背景图片的位置;

4.background-repeat设置背景图片不重复;

5.padding设置图片的内边距。

css样式代码:

<style type="text/css">

.user{

  background-image: url(img/user.png);/*设置小图标*/

  background-size: 25px 25px;/*小图标的大小*/

  background-position: 5px 4px;/*小图标在input的位置*/

  background-repeat: no-repeat;/*背景小图标不重复*/

  padding: 8px 10px 8px 40px;/*设置input内边距*/

  /*设置input样式好看*/

  border:1px solid #ddd;

  margin: 30px;

  width: 220px;

}

</style>

原文地址:https://www.cnblogs.com/qhantime/p/11328245.html

时间: 2024-10-11 03:00:14

input如何添加图标的相关文章

input框添加图标,代替submit

input框添加图标,代替submit的意思是form表单中,将常规的提交按钮更改成图标,但是图标具有提交的功能 首先,我们先探讨下如何获取图标,我是从阿里巴巴图标库中下载的,因为改版的原因,网上的一些方法并不能保证下载下来完整的代码,所以我来贴一下具体的图片,说明下如何下载代码 进入官网,搜索需要的内容,加入购物车,下载源码步骤不同就在后面 点击添加至项目,选择下载至本地 下载完成后是一个压缩包,解压后,将红色框的字体文件添加到font文件夹,因为大家可以轻而易举的发现,这是四种不同的字体编码

input输入框添加内部图标

有可能在制作网页的过程中遇到各种美化表单设计,这次我们来试着做一个demo 将input输入框添加内部图标 话不多说,看一下最终效果 我们的思路是,在一个div中,加入一个div和一个input标签,小div在左侧,input放右侧,用box-sizing:border-box,这句代码代表的是这个:怪异盒子模型 => 盒子定长定宽,不管有没有padding,border,margin,始终就是这么大,影响的只会是里面的元素. 左侧的div给border,也要给border-radius,右边的

子类化QMainWindows,添加菜单栏及工具栏,并添加图标

mymainwindow.cpp #include "mymainwindow.h" #include "ui_mymainwindow.h" //#include <QMenuBar>           //使用前向声明,不使用头文件包含的形式,主要是为了编译更快 class QMenuBar;//类的前向声明 myMainWindow::myMainWindow(QWidget *parent) :     QMainWindow(parent),

向Ubuntu的Dash中添加图标

首先准备.xpm图标文件,如果程序文件夹中没有,那么可以根据自己喜好到网上下载喜欢的图标,不要太大,然后将其改为.xpm文件(直接改了后缀名就行).然后打开/usr/share/applications/目录,可以看到里面有很多.desktop文件,我们要做的事情就是建立自己的.desktop文件(以eclipse应用程序为例). 1.建立eclipse.desktop文件,执行命令: sudo gedit /usr/share/applicastions/eclipse.desktop 2.在

Delph控制台(Console)程序添加图标和版权信息

Delphi创建控制台(Console)程序默认是无法添加图标和版权的.经过仔细的对比窗体程序与控制台程序源码,发现窗体程序的工程文中,在uses结束begin开始的地方有一句如下代码:{$R *.res}而控制台程序的工程文件里是没有这句代码的.于是,我就在想是不是我在控制台程序的工程文件里加上如上代码,我们就可以更改图标和添加版权了,说做就开始做,加上如上代码,然后保存,Delphi会自动生成资源文件,如下图:本以为可以就可以编辑图标和版权了,结果发现,版权是可以修改了,但是图标还是无法修改

为系统菜单添加图标--------暴力反射

1 import java.lang.reflect.Method; 2 3 import android.os.Bundle; 4 import android.provider.Settings; 5 import android.app.Activity; 6 import android.content.Intent; 7 import android.view.Menu; 8 import android.view.MenuItem; 9 import android.widget.T

Qt 程序和窗口添加图标

Qt项目在打包发布之后都需要有个个性的程序图标和窗口图标,这样会使程序更加美观大方,下面我们分别来看如何给程序和窗口分别添加图标.我们需要两种格式的图片,一种是.ico的,用来给程序添加图标,一种是.bmp或是.png的,用来给窗口添加图标. - 程序添加图标 如果使用的Qt Creator,那么用记事本创建一个后缀为.rc的资源文件,然后再其中添加: IDI_ICON1 ICON DISCARDABLE "xxx.ico" 注:xxx.ico为图标文件名称 然后修改工程文件(*.pr

iOS中为网站添加图标到主屏幕以及增加启动画面

虽然没有能力开发Native App,但还是可以利用iOS中Safari浏览器的特性小小的折腾一下,做一个伪Web App满足下小小的虚荣心的. 既然是在iOS中的Safari折腾的,那么代码中利用到的也基本上都是Safari的私有属性. 添加图标到主屏幕是Web App的第一步: <link rel="apple-touch-icon-precomposed" sizes="57x57" href="icon-57.png"> &l

Qt给按钮添加图标

ui.btnTest2->setIcon(QIcon(QPixmap(":/DlgGUO/icon/qd.ico"))); 不知道是Qt帮助上面说的不清楚,还是怎么的,看不明白,好不容易找到用法,记着留用 Qt给按钮添加图标