Cannot adjust input field size

Question

I have tried size attribute and width property individually and separately. But it doesn't work out. I want input and textarea of different sizes. Here are my snippets.

CSS:

input, textarea{
    margin-left: 12px;
    font-family: segoe ui;
    width: 200;
}

HTML:

<input name="mail" type="email" class="form-control" id="usrMail" size="20"/>
<textarea name="comment" class="form-control" rows="5" id="comment"></textarea>

Answer 1

input, textarea {
  margin-left: 12px;
  font-family: 'segoe ui'; 
}

input {
  width: 200px;
}

textarea {
  width: 300px;
}

<input name="mail" type="email" class="form-control" id="usrMail" size="20"/>
<br />
<br />
<textarea name="comment" class="form-control" rows="5" id="comment"></textarea>

Answer 2

Make your CSS correct. Use 'px'(200px) for width instead of using 200.

input, textarea{
	margin-left: 12px;
	font-family: segoe ui;
	width: 200px;
	/* Put your other CSS here */
}

<input name="mail" type="email" class="form-control" id="usrMail" size="20"/>
<br /><br />
<textarea name="comment" class="form-control" rows="5" id="comment"></textarea>

Answer 3

If you're using bootstrap take a look at bootstrap forms sizing.

Input Sizing in Forms :

Set the heights of input elements using classes like .input-lg and .input-sm.

Set the widths of elements using grid column classes like .col-lg-* and .col-sm-*.