在input内添加小图标或文字(元/月)等
文字:
<td class="formValue">
<div class="input-group">
<input id="AccountBillPrice" type="number" class="form-control" /><span class="input-group-addon">元/月</span>
</div>
</td>

图标:
<div class="input-group">
<input id="AccountBillPrice" type="number" class="form-control" /><span class="input-group-addon"><i class="fa fa-pencil"></i></span>
</div>

或者使用自己的图标:
<input class='phone-input' type="text" id="phone"/>
.phone-input{
padding-right:20px;
background:url("resource/***.gif") no-repeat scroll right center transparent;
}
在input内添加小图标或文字(元/月)等的更多相关文章
- input输入框添加内部图标
有可能在制作网页的过程中遇到各种美化表单设计,这次我们来试着做一个demo 将input输入框添加内部图标 话不多说,看一下最终效果 我们的思路是,在一个div中,加入一个div和一个input标签, ...
- bootstrap中如何使input中的小图标获得点击事件
bootstrap中,放入input中的小图标是不能点击的. 在表单中经常遇见密码旁边的眼睛图标点击后,可使密码可见. 要使小图标获得点击事件,可在小图标上覆盖一个跟小图标一样大的透明层,然后给透明层 ...
- title中添加小图标
<title>标签中不能添加图片,但是可以添加小图标. 步骤: 1.做一个16 X 16像素的ico格式的图标.具体操作方法是,先在Photoshop中做一个透明背景的16 X 16像素P ...
- day3-3种实现小图标与文字水平对齐的方式
效果图: 1.使用小图标作为背景图实现 html: <div class="test"> <ul> <li class="method1&q ...
- android Editview中加小图标或者文字实现
关于这个问题,如果只是加小图标的话,已经提供了很好的支持,drawableLeft属性就可以设置左边的小图标,类推,右边也可以 不过如果你要加的是文字,我找了下,没有相应的属性,我们只能通过转换思路去 ...
- iOS开发之--使用storyboard下,tabbar小图标和文字颜色的设置
在开发项目的时候,如果是使用故事版设计的架构,那么在设置tabbar小图标的时候,可能会出现一点小问题, 成功的设置方法如下: 1.设置seleectedImage和image,其实就是非选中状态的图 ...
- css:图标与文字对齐的两种方法
(好久没写博客了,这几个月的积累比较零碎,记在本子上,现在开始整理归类) 在平时写页面的过程中,常遇到要把小图标与文字对齐的情况.比如: 总结了两种方法,代码量都比较少. 第一种 对img设置竖直方向 ...
- Vue.js 使用 Font Awesome 小图标
1.安装 Font Awesome npm i --save @fortawesome/fontawesome-svg-core npm i --save @fortawesome/free-soli ...
- 用Python给头像加上圣诞帽或圣诞老人小图标
随着圣诞的到来,想给给自己的头像加上一顶圣诞帽.如果不是头像,就加一个圣诞老人陪伴. 用Python给头像加上圣诞帽,看了下大概也都是来自2017年大神的文章:https://zhuanlan.z ...
随机推荐
- Linux路由:CentOS6的多种玩法
将一台Linux主机作路由器使用,这本是件很容易的事情,利用Linux主机强大的网络功能,很轻松就实现了.这里在虚拟机环境下设定一台CentOS主机通过另一台CentOS主机路由接入Internet网 ...
- [S32K144]多通道ADC使用
1. 基本特性 问:多通道是否可以采用continuous模式,然后定时器中断读取:或者直接ADC连续采样,ADC中断赋值Buffer,然后采样处理线程负责使用,因为中断可以保证值最新? 答:从手册下 ...
- MySQL线程状态详解
前言: 我们常用 show processlist 或 show full processlist 查看数据库连接状态,其中比较关注的是 State 列,此列表示该连接此刻所在的状态.那么你真的了解不 ...
- 深度学习算法 之DCGAN(写得不系统,后期再总结,大家可简单阅览一下)
目录 1.基本介绍 2.模型 3.优缺点/其他 参考 1.基本介绍 DCGAN是生成对抗网络GAN中一种常见的模型结构.其中的生成器和判别器都是神经网络模型. GAN是一种生成式对抗网络,即通过对抗的 ...
- Keras神经网络data generators解决数据内存
在使用kears训练model的时候,一般会将所有的训练数据加载到内存中,然后喂给网络,但当内存有限,且数据量过大时,此方法则不再可用.此博客,将介绍如何在多核(多线程)上实时的生成数据,并立即的送入 ...
- Nmap扫描工具实验报告
实验报告 实验内容 通过ping进行操作系统探测 利用Zenmap/Nmap进行TCP connet扫描.TCP SYN扫描和操作系统扫描 实验目的 了解扫描的一般步骤 熟练使用ping命令并能够进行 ...
- test20190802 夏令营NOIP训练18
今天的题很有难度啊.然而我10:40才看题-- 高一学堂 在美丽的中山纪念中学里面,有一座高一学堂.所谓山不在高,有仙则名:水不在深,有龙则灵.高一学堂,因为有了yxr,就成了现在这个样子 = =. ...
- 行为型模式(九) 访问者模式(Visitor)
一.动机(Motivate) 在软件构建过程中,由于需求的改变,某些类层次结构中常常需要增加新的行为(方法),如果直接在基类中做这样的更改,将会给子类带来很繁重的变更负担,甚至破坏原有设计.如何在不更 ...
- wamp——添加多版本PHP
前言 从下载到部署,手把手教学~ wamp 版本 | 3.0.4 32位 步骤 下载PHP 进入网站https://windows.php.net/download然后选择想要的版本下载 注意点: . ...
- pt100、pt1000,和热电偶
最近温度测试这块,已使用过pt100.pt1000,和热电偶,这里进行大致的总结.1.pt系列pt100和pt1000的精度相比较,1000更加精细,毕竟他的电阻值更加大.两个电阻都是有分度表的,pt ...