Why are my text input fields longer than select tags? How can I make inputs have the same width as selects?
form fieldset {
width: 50%;
margin: auto;
border: 3px solid grey;
padding: 10px;
}
form fieldset legend {
font-size: 20px;
font-weight: bold;
}
form label {
font-weight: bold;
font-size: 16px;
margin-top: 10px;
}
form input, select {
margin-bottom: 10px;
padding: 5px;
border: 0;
border-bottom: 1px solid grey;
font-size: 16px;
width: 100%;
font-family: 'Poppins';
}
form input[type=submit] {
font-size: 20px;
border: 0;
font-weight: bold;
margin-top: 10px;
}
form input:focus, select:focus {
outline: none;
border-bottom: 2px solid black;
}
form div.submit {
width: 20%;
margin-left: auto;
margin-right: auto;
}<!DOCTYPE html>
<html lang='cs'>
<head>
<meta charset='UTF-8'>
<title>Title</title>
</head>
<body>
<form method='POST' action='quotation.php?a=insert'>
<fieldset>
<legend>My legend</legend>
<label for='customer'>Customer: </label><br>
<select name='customer' id='customer'>
<option value='NULL'></option>
<option value='1'>Cust. 1</option>
<option value='2'>Cust. 2</option>
<option value='3'>Cust. 3</option>
</select><br>
<label for='contact_person'>Contact person: </label><br>
<select name='contact_person' id='contact_person'>
<option value='NULL'></option>
<option value='1'>CP 1</option>
<option value='2'>CP 2</option>
<option value='3'>CP 3</option>
</select><br>
<label for='project'>Project: </label><br>
<input type='text' name='project' id='project'><br>
<label for='part'>Part: </label><br>
<input type='text' name='part' id='part'><br>
<label for='recieved'>Recieved: </label><br>
<input type='date' name='recieved' id='recieved'><br>
<label for='deadline'>Deadline: </label><br>
<input type='date' name='deadline' id='deadline'><br>
<div class='submit'>
<input type='submit' value='Save'>
</div>
</fieldset>
</form>
</body>
</html>Thank you for any ideas.
I attempted to set padding of the entire fieldset:
fieldset { padding: 5px }
This worked with the <p> tag but not with <input>. So, I tried setting: input {margin: 5px} but it didn't work either. In Chrome DevTools, I noticed that the margin was outside of the fieldset area.