input和textarea设置大小-奇巧淫技

最新推荐文章于 2022-07-12 11:23:41 发布

落叶翩翩

最新推荐文章于 2022-07-12 11:23:41 发布

阅读量7.8k

点赞数

分类专栏： web前端文章标签： css

本文链接：https://blog.csdn.net/bolg_hero/article/details/35314637

版权

web前端专栏收录该内容

47 篇文章 0 订阅

订阅专栏

这是input：

<input type="text" class="form-control" id="xx" name="sss">

这是textarea：

<textarea class="form-control" name="xx" style="resize: none;"></textarea>

他们有共同的属性：

class="form-control"

他们的css如下：

.form-control {
	    width: 90%;
	    height: 34px;
	    padding: 6px 12px;
	    font-size: 14px;
	    line-height: 1.42857;
	    color: #555;
	    vertical-align: middle;
	    background-color: #FFF;
	    background-image: none;
	    border: 1px solid #CCC;
	    border-radius: 4px;
	    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
	    transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
	}
	textarea.form-control {
   	 height: auto;
	}

产生的奇葩效果如下：