一个带单位的文本框

一个带单位的文本框，文本框和单位长度自适应

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>

</style>
</head>
<body>
<div style="width:200px;display:table;background-color:red">
    <input type="text" style="display:table-cell;width:100%;vertical-align:middle;box-sizing: border-box;height: 33px;"/>
    <span style="display:table-cell;width:1%;background-color:gray;white-space:nowrap;padding:5px 10px;">小时</span>
</div>
</body>
</html>

效果如下图

时间： 2024-08-04 20:54:56

一个带单位的文本框的相关文章

纯css写一个带动画的弹框 visibility + opcity

css能实现各种各样的动态效果,比js实现简单,性能也比js实现高,现在我们就用纯css实现弹窗,主要用到了两个属性 opcity 和 visibility, opctiy 这个属性很简单控制元素透明度 ,visibility控制元素的显示和隐藏,他和display有一个很重要的区别,visibility可以用transition来进行过渡,而display并不可以,这就是我们不用display的原因可以配合上transform: scale() 让弹窗更有动态感觉全部代码: <!DOCT

一个按钮完成对文本框内容的copy和复制

<!--要完成此效果需要两个步骤第一步:把如下代码加入到<head>区域中--石家庄编导-电表控制器-亿诚> <SCRIPT language=JavaScript> <!-- function MM_goToURL() { //v3.0 var i, args=MM_goToURL.arguments; document.MM_returnValue = false; for (i=0; i<(args.length-1); i+=2) eval(arg

目录视图摘要视图订阅基于Extjs开发不允许为空的文本框提示及相应的验证错误提示(转)

原文地址:http://blog.csdn.net/kunoy/article/details/8007585 本文主要解决问题: 1.区分哪些文本框不允许为空,很多网站都采用在文本框后加*号,extjs也可以用lable组件标识,但这样做很麻烦,每一个不允许为空的文本框都需要多加一个lable组件,如果用一个方法自动为不允许为空的文本框加上这个*号,在form等布局的情况下,也是可行的,但如果是absolute布局,你会发现界面就不那么舒畅了. 2.添加文本框验证错误提示,如果你采用的是for

java学习：AWT组件和事件处理的笔记(1)--文本框

java.awt包中的TextField类是专门用来建立文本框的,即TextField类创建的一个对象便是一个文本框. 1.TextField类的主要方法 (1)TextField() 创建的文本框可编辑,用户可在文本框中输入若干个字符,可见字符序列长度为一个机器字符长 (2)TextField(int x) 创建的文本框可编辑,用户可在文本框中输入若干个字符,可见字符序列长度为x个机器字符长 (3)TextField(String s)

圆角文本框的制作

把border:0px;outline:none;就可以清除边框.然后在外面放一个圆角div,文本框在div内居中的话能够,设置行高和text-align:center.或者也能够在背景图上放文本框.

kindeditor富文本框，上传文件后，显示文件名称

kindeditor作为一个应用广泛富文本框,我们经常会利用到它,然而在使用的过程中,发现有的地方使用起来很不方便,例如本文要说的,用户上传文件之后,默认只有文件URL,没有文件说明,如图: 点击确定之后,内容中显示的只是一串很长的地址,这并不是我们想要的. 更多的时候,我们只是希望它这里能默认显示文件名称,只有在文件说明里,填写了文件名称,在内容里面才会以名称的形式呈现.这个时候,我们就要给它做个小手术,来完善它,下面贴出代码: 1.修改asp.net/upload_json.ashx文件,大

jquery注册文本框获取焦点清空,失去焦点赋值

在我们开发过程中特别是用户注册时会有一个效果,就是文本框获取焦点清空提示,如果用户没有输入信息失去焦点赋值上我们的提示语 <html> <head> <meta http-equiv="content-type"content="text/html; charset=UTF-8"/> <script src="http://127.0.0.1/jquery.js"></script> &

textbox 文本框限制输入字符个数问题

1.一般情况下我们会想到的是使用它的MaxLength就可以达到目的 2.如果我们需要一个多行的文本框我们就会设置一下文本框的textmode="multiline",这时候我们会发现maxlength不再起作用了,在某个项目中我也遇到了这样的问题当时我是使用js做的处理 ? 1 2 3 function textCouter (field,maxlimit){ if(field.value.length >maxlimit) field.value=field.valu

java 24 - 6 GUI之创建只能输入数字的文本框

需求: 创建一个含有标签和文本框的窗体,其中文本框只能输入数字步骤:(大致上) 创建窗体对象创建标签对象创建文本框对象把组件添加到窗体中设置标签的监听事件,对键盘按下的数据进行监听设置窗体关闭监听事件设置显示窗体代码: 1 public class FrameTest3 { 2 3 public static void main(String[] args) { 4 5 // 创建窗体对象 6 Frame f = new Frame("QQ号码"); 7 f.setBo