模拟宽度自适应的输入框

看代码：

!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><style type="text/css">
h2 { margin:0; padding:10px 0; font-size:14px; }
.mod-retweet { background:#E4EFF4; border:1px solid #A8D1E0; padding:3px 5px 5px; margin-top:5px; }
.mod-retweet .mod-retweet-textarea { background-color: #FFFFFF; border:1px solid #64B2D1; margin-bottom:5px; overflow:hidden; padding:2px; position:relative; zoom:1 }
.mod-retweet .mod-retweet-textarea textarea {padding: 0;margin: 0; border:0 none; font-size:12px; height:80px; line-height:1.5em; width:100%; display:block }
.mod-retweet .mod-retweet-textarea input { border:0 none; font-size:12px; height:20px; line-height:1.5em; width:100%; }
</style><title>模拟宽度自适应的输入框</title></head><body><h1>模拟宽度自适应的输入框</h1><div class="mod-retweet"><h2>模拟input的自适应：</h2><div class="mod-retweet-textarea"><input type="text" name="textfield" id="textfield"></div></div><hr><div class="mod-retweet"><h2>模拟textarea的自适应：</h2><div class="mod-retweet-textarea"><textarea  maxlength="500" rows="5" cols="45" name="bookcontent"></textarea></div></div>

可以发现一个非常讨厌的地方就是：

textarea 和 input 文本输入框的边框是用套在其外层的容器的border来模拟的，textarea 和 input 文本输入框的本身边框 border:0 none。这样webkit下输入框focus后，输入框的边框在模拟的边框里面，体验上有点不爽。
还有一点非常值得注意的是：textarea的padding和margin一定要重置为0，否则在webkit和opera下会有细小的bug。

查看demo：http://www.css88.com/demo/input-textarea-adaptive

转载于:https://www.cnblogs.com/FineDay/articles/3120460.html

模拟宽度自适应的输入框相关推荐

html笔记（二）html4+css2.0（元素类型、css精灵、宽度自适应、BFC、浏览器相关概述、css统筹）
大标题小节一.元素类型 1. 元素分类 2. 置换和非置换元素 3. 元素类型转换二.css精灵三.宽高自适应 1. 宽度自适应 2. 高度自适应 3. 最小高度自适应 4. 高度塌陷及解决办 ...
微信小程序 - 富文本图片宽度自适应（正则）
引言:在微信小程序里,比如商品展示页面的商品详情会有图片展示,PC端设置的商品详情是PC端的宽度,所以在小程序里图片会显示不全,这时就应该做相应的处理,使小程序里图片显示正确思路把图片的宽度改为手 ...
xHTML+div布局：三个div,两边div宽度固定，中间div宽度自适应
xHTML+div经常考题:三个div,两边div宽度固定,中间div宽度自适应. 和大家分享一个实现方式: 1.html代码 1 <div class="dyleft"&g ...
css实现左侧宽度自适应，右侧固定宽度
页面布局中经常用会遇到左侧宽度自适应,右侧固定宽度,或者左侧宽度固定,右侧自适应.总之就是一边固定宽度,一边自适应宽度. 一般固定宽度是导航栏,自适应宽度的是主体内容显示区. 所以要实现这种布局,就先 ...
html设置box设置长度自适应,CSS实现宽度自适应宽高16:9的矩形的示例
前面我们讲了怎么做一个自适应宽高1:1的正方形现在我们来讲讲做自适应16:9的矩形要怎么做第一步先计算高度,假设宽100%,那么高为h=9/16=56.25% 第二步利用之前所说设置padding ...
iOS--SDAutolayout宽度自适应
#pragma mark - UIScrollView 内容竖向自适应.内容横向自适应方法@interface UIScrollView (SDAutoContentSize)/** 设置scroll ...
div模拟textarea自适应高度
之前在公司做项目的时候,有这么一个需求,要我写一个评论框,可以随着评论的行数增加而自动扩大,最开始我想用textarea实现,但是后来尝试后发现textarea并不适合,textarea的高度不会随着 ...
css实现右侧固定宽度，左侧宽度自适应
https://blog.csdn.net/qq_22889599/article/details/78414040 反过来也可以:左侧宽度固定,右侧自适应.不管是左是右,反正就是一边宽度固定,一边宽 ...
C# 学习笔记（16）ComboBox下拉列表框宽度自适应
C# 学习笔记(16)ComboBox下拉列表框宽度自适应当下拉列表框中内容宽度大于下拉列表框宽度时下拉列表框不能将内容全部显示出来可以在下拉时,对下拉列表框内容进行重绘 /// <sum ...

模拟宽度自适应的输入框

模拟宽度自适应的输入框相关推荐

最新文章

热门文章