my <input type=text> are longer then <select> tags. How do 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 idea.
I tried to set padding of whole fieldset:
fieldset { padding: 5px }
This is correct with tag but doesn't work with .
Then I tried to set: input {margin: 5px} but this didn't work as well. In the chrome DevTools i see that the margin is ouside of the fieldset area.
Because of padding, the border overflows the box so keep the top and bottom 5px and add 0 for right and left.
form input, select {
margin-bottom: 10px;
padding: 5px 0;
border: 0;
border-bottom: 1px solid grey;
font-size: 16px;
width: 100%;
font-family: 'Poppins';
}
Just update css style.
form input, select{
padding: 5px 0;}
I added this into CSS:
form input, select {
box-sizing: border-box;
}
This resolved my issue.
Related
I want to create a responsive form in HTML CSS.
Where I want to include the dropdown inside the input tag of HTML
<input type="number" class="form_input" id="pay" placeholder="">
<label for="pay" class="form_label_pay">you pay</label>
I don't recommend trying to create invalid html by adding a dropdown inside an input. I recommend you just create the illusion of this effect using styling.
form {
max-width: 400px;
display: flex;
}
fieldset {
flex: 1;
border: 1px solid #ccc;
border-radius: 10px;
}
legend {
font: 700 12px arial;
color: #888;
}
.combobox {
display: flex;
}
.combobox>div {
flex: 1;
margin-right: 5px;
}
#payment input {
text-align: right;
}
#payment input,
#payment select {
width: 100%;
margin: 0;
padding: 0;
border: none;
font: 18px Arial;
}
/*Hide number arrows*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Firefox */
input[type=number] {
-moz-appearance: textfield;
}
<form id="payment">
<fieldset>
<legend>You Pay</legend>
<div>
<input id="pay" type="number" class="form_input" value="0.00" placeholder="0.00 ">
</div>
</fieldset>
<fieldset>
<legend>You Receive</legend>
<div class="combobox">
<div>
<input id="receive" type="number" class="form_input" value="0.00" placeholder="0.00 ">
</div>
<div>
<select name="payment-provider " id="payment-provider " form="payment ">
<option value="BitCoin ">BTC</option>
<option value="Ethereum ">ETH</option>
<option value="Cardano ">ADA</option>
<option value="Tether ">USDT</option>
</select>
</div>
</div>
</fieldset>
</form>
Good day all. I am currently doing a form in html and css. I tried researching on the internet but somehow the code there is would either cause my textbox to lose its design and look plain or it would be very ugly.
I am trying to align the textbox with the labels so that it would look neat.
I also want to make the submit and reset button align in the center next to each other.
And the radio buttons to make them in a straight line instead of being seperated on 2 lines.
When I removed the code for the class .firstform select, type, I lose my design properties for the textboxes but the buttons managed to be align.
body {
background: url(ewp.jpg);
background-size: cover;
}
.firstform {
order-radius: 5px;
background: green;
padding: 20px;
width: 550px;
margin: auto;
color: #fff;
font-size: 16px;
font-family: verdana;
margin-top: 100px;
opacity: 0.8;
}
.firstform h1 {
text-align: center;
margin: 0;
padding: 0;
}
.firstform input,
select {
width: 50%;
padding: 12px 20px;
margin-left: 16em;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 18px;
background: black;
color: white;
opacity: 0.9;
}
.container {
display: block;
position: relative;
padding-left: 25px;
margin-bottom: 12px;
margin-left: 24em;
cursor: pointer;
font-size: 12px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide browser default radio button */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 15px;
width: 15px;
background-color: #eee;
border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
background-color: #2196f3;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.container .checkmark:after {
top: 6px;
left: 6px;
width: 4px;
height: 4px;
border-radius: 50%;
background: white;
}
.buttonHolder {
display: block;
margin: 0 auto;
}
.firstform input[type="submit"]:hover {
background: #45a049;
transparent: 0.6s;
}
.firstform input[type="reset"]:hover {
background: #45a059;
transparent: 0.6s;
}
<div class="firstform">
<h1>Student Registration Form</h1>
<form action="Form1.php" method="post">
<p><label>First Name: <input type="text" name ="fname" placeholder="First Name" maxlength="25"></label></p>
<p><label>Last Name: <input type="text" name="lname" placeholder="Last Name" maxlength="25"></label></p>
<p><label>Age: <input type="number" name= "age" min="0" max="150"></label></p>
<p><label> Date of Birth:<input type="date" name="date"></label></p>
<p>Gender:
<label class="container">
<input type="radio" name="gender" value="Male">Male
<span class="checkmark"></span>
</label>
<label class="container">
<input type="radio" name="gender" value="Female">Female
<span class="checkmark"></span>
</label>
</p>
<p> Nationality:
<label>
<select name="nationality">
<option selected>Malaysia</option>
<option>Bangladesh</option>
<option>India</option>
<option>African Nations</option>
<option>South East Asia nations</option>
<option>others</option>
</select>
</label>
</p>
<p><label>Address:<input type="text" name="address" size="30" /></label></p>
<p><label>Postcode: <input type="number" name="postcode" min="0" maxlength="5" oninput="this.value=this.value.slice(0,this.maxLength)"></label></p>
<p><label>State:
<input name="state" list="state">
<datalist id="state">
<option value="Selangor">
<option value="Kuala Lumpur">
<option value="Kelantan">
<option value="Johor">
<option value="Malacca">
<option value="Perak">
<option value="Pahang">
<option value="Negeri Sembilan">
<option value="Sabah">
<option value="Sarawak">
<option value="Perlis">
<option value="Kedah">
<option value="Terengganu">
<option value="Penang">
</datalist>
</label></p>
<p>
<label>Email:
<input type="email" name="email">
</label>
</p>
<p>
<label> Tel:
<input type="tel" name="tel" placeholder="(###) ###-####" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength="10">
</label>
</p>
<div class="buttonHolder">
<input type="submit" name="Insert">
<input type="reset" name="Clear">
</div>
</form>
</div>
Working fiddle: https://jsfiddle.net/jennifergoncalves/nut5mzgj/10/
body {
background: url(ewp.jpg);
background-size: cover;
}
.firstform {
order-radius: 5px;
background: green;
padding: 20px;
width: 550px;
margin: auto;
color: #fff;
font-size: 16px;
font-family: verdana;
margin-top: 100px;
opacity: 0.8;
}
.firstform h1 {
text-align: center;
margin: 0;
padding: 0;
}
.firstform input,
select {
width: 50%;
padding: 12px 20px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 18px;
background: black;
color: white;
opacity: 0.9;
/* removed margin-left */
}
.container {
display: block;
position: relative;
padding-left: 25px;
margin-bottom: 12px;
margin-left: 24em;
cursor: pointer;
font-size: 12px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* Hide browser default radio button */
.container input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create custom radio button */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 15px;
width: 15px;
background-color: #eee;
border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.container:hover input~.checkmark {
background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.container input:checked~.checkmark {
background-color: #2196f3;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.container input:checked~.checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.container .checkmark:after {
top: 6px;
left: 6px;
width: 4px;
height: 4px;
border-radius: 50%;
background: white;
}
.buttonHolder {
display: block;
margin: 0 auto;
}
.firstform input[type="submit"]:hover {
background: #45a049;
transparent: 0.6s;
}
.firstform input[type="reset"]:hover {
background: #45a059;
transparent: 0.6s;
}
label > span, p > span {
width: 50%;
display: inline-block;
}
<div class="firstform">
<h1>Student Registration Form</h1>
<form action="Form1.php" method="post">
<p><label><span>First Name: </span><input type="text" name ="fname" placeholder="First Name" maxlength="25"></label></p>
<p><label><span>Last Name: </span><input type="text" name="lname" placeholder="Last Name" maxlength="25"></label></p>
<p><label><span>Age: </span><input type="number" name= "age" min="0" max="150"></label></p>
<p><label><span>Date of Birth:</span><input type="date" name="date"></label></p>
<p><span>Gender:</span>
<label class="container">
<input type="radio" name="gender" value="Male">Male
<span class="checkmark"></span>
</label>
<label class="container">
<input type="radio" name="gender" value="Female">Female
<span class="checkmark"></span>
</label>
</p>
<p><label><span>Nationality:</span><select name="nationality">
<option selected>Malaysia</option>
<option>Bangladesh</option>
<option>India</option>
<option>African Nations</option>
<option>South East Asia nations</option>
<option>others</option>
</select>
</label>
</p>
<p><label><span>Address:</span><input type="text" name="address" size="30" /></label></p>
<p><label><span>Postcode: </span><input type="number" name="postcode" min="0" maxlength="5" oninput="this.value=this.value.slice(0,this.maxLength)"></label></p>
<p><label><span>State:</span><input name="state" list="state">
<datalist id="state">
<option value="Selangor">
<option value="Kuala Lumpur">
<option value="Kelantan">
<option value="Johor">
<option value="Malacca">
<option value="Perak">
<option value="Pahang">
<option value="Negeri Sembilan">
<option value="Sabah">
<option value="Sarawak">
<option value="Perlis">
<option value="Kedah">
<option value="Terengganu">
<option value="Penang">
</datalist>
</label></p>
<p>
<label><span>Email:</span><input type="email" name="email">
</label>
</p>
<p>
<label><span>Tel:</span><input type="tel" name="tel" placeholder="(###) ###-####" oninput="this.value=this.value.slice(0,this.maxLength)" maxlength="10">
</label>
</p>
<div class="buttonHolder">
<input type="submit" name="Insert"><input type="reset" name="Clear">
</div>
</form>
</div>
The issues were that you had a margin to the left of the inputs. This was preventing the elements from being inline because it added to the horizontal space needed.
Secondly, your inputs are inside your labels. This is fine practice since you can avoid using for attributes for accessibility. However, you can't target just the label, so I surrounded the actual label text with a span. Now you can just target the actual label text. Setting this to 50% and having the inputs at 50% with display:inline-block on both will solve this issue.
I suggest looking into flexbox for these kind of issues. It gives you the ability to be completely flexible about how you align your elements. Here you can find a good explanation:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
3 issues here, to fix the problem
You have enclosed the <input> inside the <label>. Move it out, close the </label> and then start the <input>
remove the margin-left of the input
give display: inline-block; width: 50%; to the label
So your code looks like this now:
jsfiddle: https://jsfiddle.net/vg3ts1m0/3/
jsfiddle (full screen): https://jsfiddle.net/vg3ts1m0/3/show
I have edited first few items in it. It will give you an idea on how to proceed.
I hope it helps.
I am trying to align the textbox with the labels so that it would look neat.
// Layout will resolve 90% of vertical alignment issues.
// To unify form controls (ex. `<input>`, `<select>`, etc) apply the following
input, select, label {display: inline-block; font: inherit}
I also want to make the submit and reset button align in the center next to each other.
/*
Wrap the buttons in a block element (ex. `<fieldset>`, `<div>`, etc)
and center the block
*/
fieldset {width: fit-content; margin: 0 auto}
<fieldset><input type='reset'><input type='submit'></fieldset>
And the radio buttons to make them in a straight line instead of being seperated on 2 lines.
/*
Dimensions should be adjusted as a square (ex. width:4vw; height:4vh;)
The following styles align everything vertically. Keep the height and
line-height the same.
*/
[type=radio] {height: 5vh; line-height: 5vh; vertical-align: middle}
Intrinsic lengths (vw and vh) are used to make the whole form so that it's responsive (see demo in full page mode.
Demo
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
font: 700 5vh/1.1 Verdana;
}
body {
overflow-x: hidden;
overflow-y: scroll;
}
form {
width: 100%;
height: 100%;
padding: 0;
margin: 0 auto;
}
fieldset {
padding: 5px;
margin: 1vh auto;
border-radius: 6px;
}
.set1>legend {
margin-bottom: -7px
}
legend {
margin-top: 10px;
}
legend+hr {
width: 30vw;
}
[type=radio] {
width: 4vw;
height: 4vh;
}
input,
select,
label {
display: inline-block;
font: inherit;
margin: 2vh 0 0 0;
height: 6vh;
line-height: 6vh;
vertical-align: middle;
padding: 1px 2px;
border-radius: 4px;
}
#first,
#last {
width: 77vw;
}
#dob {
width: 33vw
}
.set2 label {
min-width: 9vw;
}
.set3 label {
min-width: 10vw;
}
#male {
margin-left: 3vw;
}
label[for=nationality] {
width: 19vw
}
#nationality {
height: 8vh;
line-height 8vh;
}
#address {
width: 71vw;
}
#state {
width: 25vw;
}
#email {
width: 75vw;
}
[type=number],
[type=tel],
[type=date] {
font-family: Consolas;
font-size: 6vh
}
[type='reset'],
[type='submit'] {
width: 15vw;
height: 8vh;
cursor: pointer;
}
[type=submit] {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
margin: 0 0 0 -3px;
padding: 0 0 2px 0;
}
[type=reset] {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
margin: 0 0 0 -3px;
padding: 0 0 2px 0;
}
.set4 {
padding: 4px;
width: fit-content;
margin: 0px auto;
}
hr {
margin-top: 8px;
}
<form id='main'>
<fieldset name='set1' class='set1 set'>
<legend>Student Registration</legend>
<hr>
<fieldset name='set2' class='set2 set'>
<legend>Personal Information</legend>
<label for='first'>First: </label>
<input id='first' name='first' type='text'><br>
<label for='last'>Last: </label>
<input id='last' name='last' type='text'><br>
<label for='dob'>DOB: </label>
<input id='dob' name='dob' type='date'>
<input id='male' name='gender' type='radio' value='male'><label for='male'> Male </label>
<input id='female' name='gender' type='radio' value='female'><label for='female'> Female</label> <br>
<label for='nationality'>Nationality: </label>
<select id='nationality' name='nationality'>
<option value=''>---------------------------</option>
<optgroup label='North America'>
<option value='US'>American</option>
<option value='CA'>Canadian</option>
<option value='MX'>Mexican</option>
</optgroup>
<optgroup label='South America'>
<option value='BR'>Brazilian</option>
<option value='CR'>Costa Rican</option>
<option value='PR'>Peruvian</option>
</optgroup>
<optgroup label='Asia'>
<option value='CN'>Chinese</option>
<option value='JP'>Japanese</option>
<option value='IN'>Indian</option>
</optgroup>
<optgroup label='Europe'>
<option value='GB'>British</option>
<option value='DE'>German</option>
<option value='FI'>Finnish</option>
</optgroup>
<optgroup label='Africa'>
<option value='NG'>Nigerian</option>
<option value='EG'>Egyptian</option>
<option value='ML'>Malian</option>
</optgroup>
<option value='AU'>Australian</option>
</select>
</fieldset>
<hr>
<fieldset name='set3' class='set3 set'>
<legend>Contact Information</legend>
<label for='address'>Address: </label>
<input id='address' name='address' type='text'><br>
<label for='state'>State: </label>
<input id='state' name='state' list='states'>
<datalist id="states">
<option value="California">
<option value="Oregon">
<option value="Washington">
<option value="Nevada">
<option value="Arizona">
</datalist>
<label for='zipcode'>Zip Code: </label>
<input id='zipcode' name='zipcode' type='number' min='85000' max='98999'><br>
<label for='email'>Email: </label>
<input id='email' name='email' type='email'><br>
<label for='tel'>Telephone: </label>
<input id='tel' name='tel' type='tel'>
</fieldset>
<fieldset name='set4' class='set4 set'>
<input type='submit'>
<input type='reset'>
</fieldset>
</fieldset>
</form>
Could someone help me? I am with this form trying to centralize all fields in it. I've tried a bunch of different stuff, and I've noticed that the code works differently inside the theme that I am using. Is there another way to do it rather than margin: 0 auto;? Any help will be really appreciated. Here is the url. Thank you
<div id="instant-quote-form">
<form action="http://natesolutions.vonigo.com/external/" accept-charset="UTF-8" method="get" onsubmit="return submitForm(this)">
<div class="instant-quote">
<h3 class="quote-title">Instant Online Quote</h3>
</div>
<div class="house-type">
<input type="radio" onclick="showServices(this)" id="xclientTypeID" name="xclientTypeID" value="1" checked />Residential
<input type="radio" onclick="showServices(this)" id="xclientTypeID" name="xclientTypeID" value="2" />Commercial
</div>
<div class="zip-code">
<input type="text" id="zip" name="zip" value="" placeholder="Enter Postal Code"/>
</div>
<div class="house-size" id="divServices1">
<select id="xserviceTypeID1" onchange="changeService(this)">
<option value="14" selected>Small House (1200-2000sq.ft)</option>
<option value="17">Medium House (2001-2800sq.ft)</option>
<option value="18">Large House (2801-3500sq.ft)</option>
<option value="19">XL House (3500+)</option>
</select>
</div>
<div class="button-go">
<input type="submit" value="Go" />
</div>
<input type="hidden" id="xserviceTypeID2" value="20" />
<input type="hidden" id="xserviceTypeID5" value="20" />
<input type="hidden" id="clientTypeID" name="clientTypeID" value="1" />
<input type="hidden" id="serviceTypeID" name="serviceTypeID" value="14" />
</form>
</div>
<style>
#instant-quote-form {
width: 100%;
margin: 0 auto;
}
.instant-quote {
float: left;
margin: 20px 5px;
padding-top: 4px;
}
.house-type {
float: left;
margin: 20px 5px;
color: #ffffff;
font-size: 16px;
padding-top: 5px;
}
.zip-code {
float: left;
margin: 20px 5px;
border: 1px solid #ffffff;
border-radius: 3px;
color: #000000;
}
.house-size {
float: left;
margin: 20px 5px;
border: 1px solid #ffffff;
border-radius: 3px;
color: #000000;
}
select#xserviceTypeID1 {
border: 1px solid #ffffff;
font-size: 13px;
padding: 10px;
color: #000000;
}
.button-go {
float: left;
margin: 20px 5px;
}
h3.quote-title {
margin-bottom: 0;
color: #ffffff;
}
input#zip {
margin-bottom: 0;
border: 1px solid #ffffff;
font-size: 13px;
padding: 9px;
}
input#zip::placeholder {
color: #000000;
}
input[type=text]::placeholder {
color: #000000;
}
input#xclientTypeID {
margin: 0 5px;
}
input[type="submit"] {
height: 37px;
width: 50px;
background: #55b948;
color: #fff;
border-radius: 3px;
text-transform: uppercase;
border: 1px solid #55b948;
font-weight: bold;
}
</style>
As your #instant-quote-form is as wide as its parent, centering this element will not do anything. What you will need to do is to center the <form> inside of its container. This can be done by applying display:flex to #instant-quote-form and then margin:0 auto to #instant-quote-form > form:
#instant-quote-form {
display: flex;
}
#instant-quote-form > form {
margin: 0 auto;
}
Try enclosing your <form> within <center> tag
Additionally, If you want the form with elements in a vertically aligned fashion then set float to none for each direct child of your <form>
If this isn't what you were looking for, please elaborate your issue and expected outcome.
I have an form in my index page where i used same css code for input and select but the problem is that in input tag its working fine as per i want but in the select tag firstly width became little small and in when i am selecting the option its not getting selected though in MAC chrome its working fine but in windows chrome its not getting selected!!
Please check my code and let me know where i went wrong!
#contact-form input[type="text"],
#contact-form select[type="text"],
#contact-form textarea {
width: 247px;
max-width: 100%;
padding: 16px 10px;
background: #4f5662;
border: 1px solid #828fac;
border-radius: 5px;
-webkit-border-radius: 5px;
box-sizing: content-box;
-moz-border-radius: 5px;
-o-border-radius: 5px;
color: #b6b7b8;
font-size: 14px;
font-family: helvetica;
box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
-o-box-shadow: none;
margin-right: 18px;
}
#contact-form input[type="submit"],
.newsleter-widget input[type="submit"] {
float: right;
font-size: 14px;
color: #fff;
font-family: 'Noto Sans', sans-serif;
text-transform: uppercase;
background: #8248ac;
padding: 20px 13px;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border: none;
}
#contact-form input[type="text"],
#contact-form select[type="text"],
#contact-form2 textarea {
margin-right: 0;
display: block;
width: 94%;
max-width: 94%;
margin-bottom: 19px;
padding: 16px 3%
}
#contact-form textarea,
#contact-form2 textarea {
height: 110px;
padding: 8px 3%;
}
#contact-form input[type="submit"],
#contact-form2 input[type="submit"] {
display: block;
float: right;
padding: 20px 38px;
}
<div class="span4">
<h3>Contact Form</h3>
<form id="contact-form">
<input type="text" name="name" class="name" placeholder="Name">
<input type="text" name="email" class="email" placeholder="Email address">
<input type="text" name="email" class="email" placeholder="Phone no">
<select type="text" name="service">
<option value="" selected >Select Services</option>
<option value="" >Option 1</option>
<option value="" >Option 2</option>
<option value="" >Option 3</option>
</select>
<input type="submit" name="submit-form" id="submit" value="Send Message">
</form>
</div>
When i pasted code here also , the option tag is getting selected though but in my code its not getting selected!! but still here also width of the select tag is still little smaller as compared to input tag.
Now its looks like this
You must use box-sizing property to what should be included in sizing properties (width and height)
For your issue box-sizing: border-box and some modification in width and margin property will do the task.
Here is the fiddle for same https://jsfiddle.net/c7Lojau2/
I am currently trying to finish up a little exercise I did. I am trying to align both my text input and my select input boxes, but I can't seem to figure out how to align the select list to the input box. I have tried using labels and css, and tables, but somehow my forms end up scattered across each other. Any help is greatly appreciated:
<!DOCTYPE html>
<html>
<head>
<title>Game Intro</title>
<link rel="stylesheet" type="text/css" href="http://localhost/webtech/sample.css"
</head>
<body>
<h1>Character Creation</h1>
<h2>You have 10 Gold Pieces</h2>
<ul>
<li>1 gold piece buys 10 health tokens</li>
<li>1 gold piece buys 2 experience tokens</li>
<li>1 gold piece buys 10 supply tokens</li>
</ul>
<form action="gameIntro.php" method="post">
<table>
<p>Enter your character's name:
<input type="text" size="20" name="character_name" /></p>
<p>Select your character class:
<select name="character_class">
<option>Dwarf</option>
<option>Human</option>
<option>Elf</option>
<option>Wizard</option>
</select>
</p>
<p>Purchase health tokens:
<select name="health_token">
<option>0</option>
<option>10</option>
<option>20</option>
<option>30</option>
</select>
</p>
<p>Purchase experience tokens:
<select name="experience_token">
<option>0</option>
<option>2</option>
<option>4</option>
<option>6</option>
<option>8</option>
<option>10</option>
</select>
</p>
<p>Purchase supply tokens:
<select name="supply_token">
<option>0</option>
<option>25</option>
<option>50</option>
<option>75</option>
<option>100</option>
</select>
</p>
<p><input type="submit" value="Submit your Character" />
<input type="reset" value="Reset your Character" /></p>
</table>
</form>
<a href={"http://localhost/index.html"}>Go back to Homepage</a>
</body>
</html>
css file:
body { background: white }
h1 { font-family: Arial, Helvetica, Sans-Serif;
font-size: 18pt; color: black; font-weight: bold; }
h2 { font-family: Arial, Helvetica, Sans-Serif;
font-size: 16pt; color: black; font-weight: bold; }
p { font-family: Arial, Helvetica, Sans-Serif;
font-size: 12pt; color: black; font-weight: bold; }
p.alert { font-style: italic; color: red; }
table { font-family: Arial, Helvetica, Sans-Serif;
font-size: 12pt; color: black; }
td.center { text-align: center; }
select { font-family: Arial, Helvetica, Sans-Serif;
font-size: 10pt; font-weight: bold; color: blue;
background: lightBlue; }
option { font-family: Arial, Helvetica, Sans-Serif;
font-size: 10pt; color: black; background: silver; }
Thx guys!
I would suggest you learn to use a table properly. Tables are not stand alone elements, there are certain required child elements. for example
<table>
<tr>
<td>Name: </td>
<td><input type="text" name="name" /></td>
</tr>
</table>
Start with reviewing how tables work, and you'll find this much easier.
http://www.w3schools.com/html/html_tables.asp
Here you go:
Use this HTML structure: Put your label/p elements on first column, input and select elements on second column.
<tr>
<td></td>
<td></td>
</tr>
Fiddle
As far as my knowledge - at this date... this is how I would mark up this form.
I only put the id's and for="" on the first input. I hope this helps you understand a bit better. Here is a fiddle - (change the browser window to see how the form adjusts for screen sizes)
HTML
<form action="gameIntro.php" method="post" class="character-form">
<ul>
<li>
<label for="input-name">Enter your character's name:</label>
<input id="input-name" type="text" size="20" name="character_name" />
</li>
<li>
<label>Select your character class:</label>
<select name="character_class">
<option>Dwarf</option>
<option>Human</option>
<option>Elf</option>
<option>Wizard</option>
</select>
</li>
<li>
<label>Purchase health tokens:</label>
<select name="health_token">
<option>0</option>
<option>10</option>
<option>20</option>
<option>30</option>
</select>
</li>
<li>
<label>Purchase experience tokens:</label>
<select name="experience_token">
<option>0</option>
<option>2</option>
<option>4</option>
<option>6</option>
<option>8</option>
<option>10</option>
</select>
</li>
<li>
<label>Purchase supply tokens:</label>
<select name="supply_token">
<option>0</option>
<option>25</option>
<option>50</option>
<option>75</option>
<option>100</option>
</select>
</li>
</ul>
<input type="submit" value="Submit your Character" />
<input type="reset" value="Reset your Character" />
</form>
CSS
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
/* look it up */
}
.character-form {
border: 1px solid red;
overflow: hidden; /* should be a clearfix */
}
.character-form ul {
width: 100%;
float: left;
list-style: none;
margin: 0; padding: 0;
}
.character-form li {
width: 100%;
float: left;
margin-bottom: 1em;
border: 1px solid blue;
}
.character-form li label {
border: 1px solid orange;
}
.character-form li input, .character-form li select {
border: 1px solid green;
width: 100%;
display: block;
float: left;
float: left;
}
#media (min-width:20em) {
.character-form {
max-width: 30em;
margin-right: auto;
margin-left: auto;
}
.character-form li label {
float: none;
width: auto;
vertical-align: middle;
display: inline-block;
min-width: 15em;
}
.character-form li input, .character-form li select {
float: none;
width: auto;
display: inline-block;
vertical-align: middle;
}
.character-form li input {
width: 100%;
max-width: 20em;
}
.character-form li select {
min-width: 12em;
}
} /* end break-point */