100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 这是一小段自适应宽度的输入框代码

这是一小段自适应宽度的输入框代码

时间:2021-01-25 09:49:04

相关推荐

这是一小段自适应宽度的输入框代码

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

HTML代码:

<!DOCTYPE HTML>

<html>

<head>

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

<title>模拟宽度自适应的输入框</title>

</meta>

</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>

</body>

</html>

缺点:

1、textarea 和 input 文本输入框的边框是用套在其外层的容器的border来模拟的,textarea 和 input 文本输入框的本身边框 border:0 none。这样webkit下输入框focus后,输入框的边框在模拟的边框里面,体验上有点不爽。

2.textarea的padding和margin一定要重置为0,否则在webkit和opera下会有细小的bug。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。