在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;
} 

原文地址:https://www.cnblogs.com/firstcsharp/p/11269038.html

时间: 2024-10-11 02:59:52

在input内添加小图标或文字(元/月)等的相关文章

input输入框添加内部图标

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

如何在网址之前添加小图标

如何在网址之前添加小图标:本章节介绍一下如何在网址前面添加一个小图标,现在知名网站都会有这个小图标,非知名网站也有很多添加这样的小图标,至于有没有好处这里不好说,至少比较美观,下面就就介绍一下如何实现此效果.方法如下:在头部中添加如下代码即可: <link rel='icon' href='antzone.ico' type='image/x-ico' /> 图标的格式必须是.ico格式,在网上有很多在线生成工具. 原文地址是:http://www.softwhy.com/forum.php?

小图标和文字的居中对齐-小总结

小图标和文字的居中对齐问题,相信大家在很多时候会遇到.今天楼主从其他大神那边扒了一些方法,现在做个小小的总结. 说明:本次用到的小图标来自阿里巴巴矢量图,大家可以去找一下(地址:http://www.iconfont.cn/plus/collections/detail?cid=3223)我的图标尺寸是20px*20px 第一种办法:vertical-align和line-height结合 特点:这种办法只适用于放置小图标和文字的标签的display属性都是inline的情况. 效果图: 代码如

title中添加小图标

<title>标签中不能添加图片,但是可以添加小图标. 步骤: 1.做一个16 X 16像素的ico格式的图标.具体操作方法是,先在Photoshop中做一个透明背景的16 X 16像素PNG格式的小图标,再在AWiconsPro软件中导入这个PNG图标,再另存为ICO格式.注意:文件名一定要保存为favicon.ico. 2.把favicon.ico图标文件上传到你的网站根目录即可.下次浏览这个网站时网页的标题栏就会显示这个小图标.注意:如果没有显示,可能是浏览器缓存问题,此时按Ctrl+F

android Editview中加小图标或者文字实现

关于这个问题,如果只是加小图标的话,已经提供了很好的支持,drawableLeft属性就可以设置左边的小图标,类推,右边也可以 不过如果你要加的是文字,我找了下,没有相应的属性,我们只能通过转换思路去实现,我的方法是用个layout去包括一个Textview和一个Editview就可以了. 1 <LinearLayout 2 android:layout_width="match_parent" 3 android:layout_height="wrap_content

iOS开发之--使用storyboard下,tabbar小图标和文字颜色的设置

在开发项目的时候,如果是使用故事版设计的架构,那么在设置tabbar小图标的时候,可能会出现一点小问题, 成功的设置方法如下: 1.设置seleectedImage和image,其实就是非选中状态的图片,设置选中是的图片,也可以用代码设置,如下: self.tabBarController.tabBar.selectedItem.selectedImage = [UIImage imageNamed:@"home_selected"]; 2.这时候,会发现,不管你怎么弄,只会显示颜色不

给网页标题添加小图标

网页标题添加图标 示例:百度页面 在head标签对里插入link标签对 <link rel="shortcut icon" href="https://gss0.bdstatic.com/5bd1bjqh_Q23odCf/static/wiseindex/img/favicon64.ico" type="image/x-icon"/> 原文地址:https://www.cnblogs.com/masanhe/p/8955516.htm

input如何添加图标

代码:<input type="text" class="user" /> 设置class类属性,添加小图标.创建<style>标签,然后在这个标签里面设置user样式. 1.使用background-image设置input背景图片: 2.background-size设置背景图片的大小: 3.background-position设置背景图片的位置: 4.background-repeat设置背景图片不重复: 5.padding设置图片的

移动端实现 iphone android 小图标 文字排版

情景描述: 在手机浏览器中展示一些数据,这些数据前面都小图标,要求:小图标和文字水平对齐. 效果图 问题分析: 对于图文横排的问题,有很多的解决办法,但是究其根本还是将图片和文字放在同一行上进行展示. 实现方案: 方案一: 写法上很简单,但是这个的兼容性有很大问题. .m-icon{ display:inline-block;  vertical-align:middle; padding-right:1em; height:1em; background-image:url(icon.png)