Making textarea shorter

Question

I am wanting to make my text area shorter in height.

This is my textarea:

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

I basically want it to be a single line. Here is my CSS for it.

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

I can't seem to get it any smaller.

Answer 1

The problem is you need to decrease the top and bottom padding property values:

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

Try removing the height value of your CSS. If that doesn't work, set the height value of your CSS in px instead of em;

Answer 3

Since you're using a single row, I would suggest to use an element.

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