使textarea更短

Question

我想让我的文字区域更短。

这是我的textarea：

<textarea cols="40" rows="1" type="text" name="roomName" id="regularInput"></textarea>

我基本上希望它是一条线。这是我的CSS。

form textarea
        {
            resize: none;
            -webkit-appearance: none;
            display: block;
            border: 0;
            background: #fff;
            background: rgba(255,255,255,0.75);
            border-radius: 0.50em;
            margin: 1em 0em;
            padding: 1.50em 1em;
            height: 1em;
            box-shadow: inset 0 0.1em 0.1em 0 rgba(0,0,0,0.05);
            border: solid 1px rgba(0,0,0,0.15);
            -moz-transition: all 0.35s ease-in-out;
            -webkit-transition: all 0.35s ease-in-out;
            -o-transition: all 0.35s ease-in-out;
            -ms-transition: all 0.35s ease-in-out;
            transition: all 0.35s ease-in-out;
            font-family: 'Source Sans Pro', sans-serif;
            font-size: 1em;
            outline: none;
        }

我似乎无法让它变小。

Answer 1

问题是您需要减少顶部和底部padding属性值：

form textarea
        {
            resize: none;
            -webkit-appearance: none;
            display: block;
            border: 0;
            background: #fff;
            background: rgba(255,255,255,0.75);
            border-radius: 0.50em;
            margin: 1em 0em;
            padding: 0.2em 1em;
            height: 1em;
            box-shadow: inset 0 0.1em 0.1em 0 rgba(0,0,0,0.05);
            border: solid 1px rgba(0,0,0,0.15);
            -moz-transition: all 0.35s ease-in-out;
            -webkit-transition: all 0.35s ease-in-out;
            -o-transition: all 0.35s ease-in-out;
            -ms-transition: all 0.35s ease-in-out;
            transition: all 0.35s ease-in-out;
            font-family: 'Source Sans Pro', sans-serif;
            font-size: 1em;
            outline: none;
        }

http://jsfiddle.net/q8MR2/

Answer 2

尝试删除CSS的高度值。如果这不起作用，请以px而不是em设置CSS的高度值;

Answer 3

由于您使用的是单行，我建议您使用一个元素。

<input type='text' class='inputField' value='e.g. Sample'></input>

.inputField { 
            -webkit-appearance: none;
            display:block;
            background: #fff;
            background: rgba(255,255,255,0.75);
            border-radius: 0.50em;
            margin: 1em 0em;
            padding: 0.2em 1em; 
            /*height: 1em; Height is standard with <input> */
            box-shadow: inset 0 0.1em 0.1em 0 rgba(0,0,0,0.05);
            border: solid 1px rgba(0,0,0,0.15);
            -moz-transition: all 0.35s ease-in-out;
            -webkit-transition: all 0.35s ease-in-out;
            -o-transition: all 0.35s ease-in-out;
            -ms-transition: all 0.35s ease-in-out;
            transition: all 0.35s ease-in-out;
            font-family: 'Source Sans Pro', sans-serif;
            font-size: 1em; //
            outline: none;
        }