input 框后面带单位、提示

最新推荐文章于 2024-06-10 15:55:01 发布
最新推荐文章于 2024-06-10 15:55:01 发布
阅读量9.2k 收藏 13
点赞数 4
分类专栏： 学习 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wanghu20150107010129/article/details/103529579
版权

css

   .input-group {
            position: relative;
            display: table;
            border-collapse: separate;
            width: 100%;
        }
        .input-group .form-control, .input-group-addon {
            display: table-cell;
        }
        .input-group-addon {
            padding: 5px;
            text-align: center;
            background-color: #eee;
            border-radius: 2px;
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
        }
        .input-group .form-control:first-child{
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }

html

<div class="input-group">
                            <input name="up_the_peak_gain" type="text" class="layui-input form-control" lay-verify="required">
                            <span class="input-group-addon">dBi</span>
                            </div>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width" , initial-scale=1 />
		<meta http-equiv="X-UA-Compatible" content="edge" />
		<title>带单位列表</title>
		
		<style>
			body {
				line-height: 24px;
				font: 14px Helvetica Neue, Helvetica, PingFang SC, Tahoma, Arial, sans-serif;
			}

			.wide-d {
				width: 250px;
				margin: 10px;
			}

			.input-group {
				position: relative;
				display: table;
				border-collapse: separate;
				width: 100%;
			}

			.input-group .form-control,
			.input-group-addon {
				display: table-cell;

			}

			.form-control {
				width: 100%;
				padding-left: 10px;
				height: 38px;
				line-height: 1.3;
				border-width: 1px;
				border-style: solid;
				background-color: #fff;
				border-radius: 2px;
				border-color: #e6e6e6;
				box-sizing: border-box;
			}

			.form-control:focus {
				border-color: #C9C9C9 !important
			}

			.input-group-addon {
				width: 50px;
				padding: 5px;
				text-align: center;
				background-color: #eee;
				border-radius: 2px;
				border-top-left-radius: 0;
				border-bottom-left-radius: 0;
			}

			.input-group .form-control:first-child {
				border-top-right-radius: 0;
				border-bottom-right-radius: 0;
		</style>
	</head>
	<body>
		<div class="wide-d">
			<div class="input-group">
				<input class="form-control" lay-verify="required">
				<span class="input-group-addon">dBi</span>
			</div>

		</div>
		<div class="wide-d">
			<div class="input-group">
				<input class="form-control" lay-verify="required">
				<span class="input-group-addon">km/h</span>
			</div>

		</div>
		<div class="wide-d">
			<div class="input-group">
				<input class="form-control" lay-verify="required">
				<span class="input-group-addon">m/s</span>
			</div>

		</div>
	</body>
</html>

result         result

上班四个多月，学到了，加油！

Raywh
关注
  • 4
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
easyui 扩展 带单位输入框
07-29
easyui 扩展 带单位 输入框 input
java微信公众号MVC开发框架
12-20
load-on-startup表示Servlet在web应用启动阶段加载，数字代表了启动次序，如果项目使用了springmvc框架，可以调整该数字为2，放到springmvc框架后面启动加载，但实际上Servlet的启动次序并没有太大的关系。...
【HTML】input 输入框
joanmelon的博客
08-07 2434
☀️大家好，我是宾果的救星~希望记录的学习和收获能够帮助大家在开发过程中得到思路并且解决难题。希望大家多多点赞~爱你们哟~
input框添加一个单位
悟能的师兄的专栏
10-29 7288
<input type="text" name="fullName" placeholder="12"onkeyup='this.value=this.value.replace(/\D/gi,"")' > <span style=" position: absolute; top: 1%; right: 6%;color: #adadad; display: table-ce...
elemnt自定义输入框后面加单位
最新发布
qq_43235503的博客
06-10 173
elemnt自定义输入框后面加单位
如何在input框中加文字（单位）
热门推荐
梁小茹的博客
12-15 1万+
看图 prefix:前面加 suffix：后面加 <el-form-item label="车辆载重" :label-width="formLabelWidth"> <el-input v-model="form.name" placeholder="请输入" autocomplete="off" > <
给input添加一个单位！！！！
weixin_38170829的博客
08-22 3180
直接贴到input后面，具体根据个人要求再微调<span style=" position: absolute; top: 8%; right: 6%; display: table-cell;background-color: #0d8ddb; white-space: nowrap; padding: 7px 10px;">m</span> 转载于:http...
在input框的后面添加一个单位
web
10-30 7553
结果为： 代码 <input type="text" /> <span style="position: absolute; top: 0; right: 0; display: table-cell; white-space: nowrap; padding: 7px 10px;">万元</span> 样式可以在style里调整 参考：https://www.cnblogs.com/Linlearn/p/11393042.html ...
IPUT输入框末端加上单位：元，个。。
sunyiban的专栏
12-10 8446
table {border-top:1px solid black;border-left:1px solid black;} table td{border-right:1px solid black;border-bottom:1px solid black;} .combo { border-color: black; background-color: #f
自定义金额input输入框后加单位及input输入框限制处理
weixin_44935752的博客
12-30 2487
在开发V钻充值模块时，遇到自定义充值模块–自定义金额输入框，发现这块内容的要求较多较复杂，在踩过很多坑后，特此分享经验给大家： 要求一：点击后出现光标及单位名称，数字键盘从下而上弹出，去支付按钮随之上移。输入数字后，去支付按钮人民币数额同步变化为相应数字； 1.通过input输入框可实现点击后出现光标，且数字键盘从下而上弹起，去支付按钮随之上移（此处为css实现，不多概述），需要注意的是，input里的value初始值为“自定义面额” 2.点击后出现单位名称“V钻” 我们不能在点击自定义面额按钮后，将i
css 原生input框带单位
weixin_43824848的博客
08-31 843
效果如⬆️ HTML部分 const prefixCls = 'issues-detail'; <div className={`${prefixCls}-box}`}> <input className={`${prefixCls}-input}`} /> <span className={`${prefixCls}-month`}>个月</span> </div> CSS部分 $prefixCls: 'issues-detail'; ..
ionic 表单和输入框
01-06
以下实例中，默认为100%宽度（左右两侧没有边框），并使用 placeholder 属性设置输入字段预期值的提示信息。 输入框属性：input-label 使用 input-label 将标签放置于输入框 input 的左侧。 ...
移动作业.docx
10-07
10. **尺寸单位**：`dp`（density-independent pixels）是Android中的长度单位，它是一种与设备像素密度无关的单位，确保在不同屏幕密度的设备上显示一致的大小。 11. **颜色值**：例如`#FAFBFC`和`#101111`是十六...
js兼容的placeholder属性详解
10-26
这段代码的核心逻辑是，如果浏览器不支持`placeholder`，它会在每个具有`placeholder`属性的`<input>`或`<textarea>`后面动态创建一个`<label>`元素，用于显示提示文本。`<label>`的位置通过CSS定位与输入框重叠，...
2021-2022计算机二级等级考试试题及答案No.3343.docx
11-01
6. 顺序文件的打开方式中，Random不是一种，Input、Output和Append是常见的文件打开模式。 7. 在Word中，删除表格单元格可以通过“表格”菜单中的“删除单元格”命令完成。 8. 要确保学生数据表中不出现同名记录，...
input文本框后面添加单位
weixin_46596863的博客
04-17 1012
【代码】input文本框后面添加单位。
css 实现输入框后加单位
qq_40308150的博客
03-30 6717
div class="row form-group"> div class="col-md-2"> label class="form-text text-right">当前应收款label> div> div class="col-md-4 form-inline"> div class="input-group"> input type="number
Layui input赋值/取值时自动换算单位
mxywxwk的博客
05-22 1341
平时项目中金额，重量等单位数据库一般用分，千克保存，而在前台展示确实用元，吨。这样在给input的赋值每次都要做单位换算很麻烦，修改了layui中form.js的代码以方便此类操作。 //路径 layui/lay/modules/form.js u.prototype.val = function (e, i) { var a = this, n = t(r + '[lay-filter="' + e + '"]'); n.each(function
vue2+Ant Design of Vue1.7.8实现inputNumber 数字输入框后缀单位
weixin_51672910的博客
12-18 906
想用Ant Design of Vue1.7.8版本中inputNumber数字输入框实现input输入框的自定义后缀的功能，发现antd1.7.8版本没有这个功能于是扒css代码实现了
elementplus inputnumber 后面加单位
09-05
elementplus inputnumber 组件可以通过设置 formatter 和 parser 属性来实现在输入框后面显示单位。 formatter 是一个函数，它会在显示在输入框中的数值后添加单位字符，例如： ```javascript <el-input-number v-model="value" :formatter="addUnit"></el-input-number> ... methods: { addUnit(value) { return value + ' 单位'; } } ``` parser 是一个函数，它会在获取输入框中数值时去除单位字符后返回，例如： ```javascript <el-input-number v-model="value" :parser="removeUnit"></el-input-number> ... methods: { removeUnit(value) { return value.replace(' 单位', ''); } } ``` 通过设置 formatter 和 parser，我们可以实现在输入框中显示带单位的数值，并在获取输入框的数值时去除单位字符。这样用户输入的数值就可以携带单位信息。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值