i am using some fieldsets in my form. But when i want to use them they are like disabled. You can't click in a textbox and you can't select an option in the selectbox. Here is my code:
HTML:
<fieldset>
<legend>Group 1</legend>
<div><input type="text" /></div>
<div>
<select>
<option>Option 1</option>
</select>
</div>
</fieldset>
<fieldset>
<legend>Group 1</legend>
<div><input type="text" /></div>
<div>
<select>
<option>Option 1</option>
</select>
</div>
</fieldset>
CSS:
#main {
position: relative;
border: 1px solid #c3c3c3;
box-shadow:
0 0 0 1px #d8d8d8;
min-width: 300px;
min-height: 500px;
max-height: 500px;
max-width: 300px;
background-color: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
z-index:-1;
margin-left: 40%;
margin-right: 40%;
padding-top: 70px;
padding-bottom: 10px;
padding-left: 20px;
padding-right: 20px;
}
FIELDSET {
margin: 8px;
border: 1px solid silver;
padding: 8px;
border-radius: 4px;
}
LEGEND{
padding: 2px;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
font-weight:normal;
line-height:1;
color:#999;
}
To demonstrate the effect here it is on JSFiddle. I have built my code based on this: JSFiddle
Can someone say me what i have done wrong?
Remove z-index css Rule from #main and it will work.
Updated Working Fiddle
Read more: What z-index does actually!
Related
I've recently started learning Html and Css and I'm trying to move the word "Your Comment" to the top in the input field.
https://prnt.sc/1k74619
<div class="comment">
<input placeholder="Your Comment" type="text" />
</div>
.comment input {
width: 680px;
height: 169;
border: 0;
padding-left: 20px;
font-family: 'Montserrat';
outline-color: #b5b5b5;
margin-top: 30px;
margin-left: -115px;
}
<INPUT> tag is for single line text but <TEXTAREA></TEXTAREA> tag is for multi line text.
Useful link: https://www.w3schools.com/html/html_form_elements.asp
*{
box-sizing: border-box;
}
.comment input,
.comment textarea{
font-family: 'Montserrat', Arial;
width: 100%;
max-width: 680px;
padding: 20px;
border: 1px solid #b5b5b5;
outline: none;
border-radius: 8px;
margin-bottom: 10px;
}
.comment textarea{
height: 169px;
}
.comment input:focus,
.comment textarea:focus{
border: 1px solid #32babe;
box-shadow: 0 0 0 2px #32babe;
}
<div class="comment">
<input type="text" placeholder="Your Commnet - in single line">
<textarea placeholder="Your Comment - in multi lines"></textarea>
</div>
I don't think this is possible to do, if you want a larger multi line text input area <textarea></textarea> may suit your needs.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea
If you want to achieve the same effect you can try nesting the input field in a bordered <div> something like this perhaps:
https://codepen.io/iltg/pen/RwVemeB
You can do like this:
textarea {
font-size: .8rem;
letter-spacing: 1px;
}
textarea {
padding: 10px;
max-width: 100%;
line-height: 1.5;
border-radius: 5px;
border: 1px solid #ccc;
box-shadow: 1px 1px 1px #999;
}
<textarea id="story" name="story"
rows="5" cols="33">
Your comment
</textarea>
You can use Bootstrap's floating label. It would do the job very nicely.
Here's how you will do it:
<div class="form-floating">
<textarea class="form-control" placeholder="Leave a comment here" id="floatingTextarea"></textarea>
<label for="floatingTextarea">Comments</label>
</div>
.custom-field{
position: relative;
margin-top: 50px;
}
.comment input, .comment textarea {
font-family: 'Montserrat', Arial;
width: 100%;
max-width: 680px;
padding: 20px;
border: 1px solid #b5b5b5;
outline: none;
border-radius: 8px;
margin-bottom: 0;
}
.placeholder {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.custom-field input:focus + .placeholder {
top: -20px;
}
<div class="custom-field">
<input id="email-field" type="email">
<label for="email-field" class="placeholder">Enter Email</label>
</div>
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 trying to put footer at the bottom with a horizontal line just above the footer. But I am not even able to get footer at the bottom. Tried many posts and blogs but I am missing out on something. I am using the base of some blog to create the signup page.
Fiddle
html
<div id="header">
</div>
<div id="main">
<div id="container">
<form action="index.html" method="post">
<p id="form_title" style='color:#808080'>Create an Account</p>
<fieldset>
<legend style="color:#585858">Get started with Your Profile</legend>
<label for="name" style='color:#808080;font-size:14px'>CUSTOM NAME</label>
<input type="text" id="name" name="user_name" style="color:#404040">
<label for="type" style='color:#808080;font-size:14px'>TYPE</label>
<select id="sel-type" name="type">
<option value="frontend_developer">Front-End Developer</option>
<option value="php_developor">PHP Developer</option>
<option value="python_developer">Python Developer</option>
<option value="rails_developer"> Rails Developer</option>
<option value="web_designer">Web Designer</option>
<option value="WordPress_developer">WordPress Developer</option>
</select>
<label for="type" style='color:#808080;font-size:14px'>REGION</label>
<select id="sel-region" name="region">
<option value="frontend_developer">Front-End Developer</option>
<option value="php_developor">PHP Developer</option>
<option value="python_developer">Python Developer</option>
<option value="rails_developer"> Rails Developer</option>
<option value="web_designer">Web Designer</option>
<option value="WordPress_developer">WordPress Developer</option>
</select>
</fieldset>
<button type="submit">Create Profile</button>
</form>
</div>
</div>
<div id="footer">
About
Instructions
Encountered an issue?
</div>
css
*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Lato';
background-color: #E8E8E8;
}
#header {
width:100%;
background-color: #27272D;
height: 50px ;
border:1px solid;
position:relative;
}
#main{
border:1px solid;
width:100%;
height:100%;
}
#container{
margin-top: 100px;
border:1px;
}
form {
max-width: 300px;
margin: 10px auto;
padding: 10px 20px;
border-radius: 3px;
background-color: white;
border:1px;
}
#form_title {
margin: 10px 0 30px 15px;
font-size:20px;
}
input[type="text"],
select {
background: rgba(255,255,255,0.1);
border: none;
font-size: 16px;
height: auto;
margin: 0;
outline: 0;
padding: 15px;
width: 100%;
background-color: #e8eeef;
color: #8a97a0;
box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
margin-bottom: 20px;
}
input[type="text"]{
border-radius: 6px;
-moz-border-radius: 6px;
-khtml-border-radius: 6px;
-webkit-border-radius: 6px;
height:44px;
font-size: 14px;
}
select {
padding: 6px;
height: 44px;
border-radius: 2px;
}
button {
color: #FFF;
background-color: #13ABAF;
font-size: 14px;
text-align: center;
font-style: normal;
border-radius: 5px;
width: 96%;
height:44px;
border: 1px solid;
border-width: 1px 1px 3px;
margin-bottom: 10px;
margin-left: 10px;
}
fieldset {
border: none;
}
legend {
font-size: 17px;
margin-bottom: 24px;
}
label {
display: block;
margin-bottom: 8px;
}
label.light {
font-weight: 300;
display: inline;
}
#horizontal-line{
display: block;
margin-top:100px;
margin-bottom: 60px;
width:96%;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
border-color: #F0F0F0;
}
#footer {
position : absolute;
bottom : 0;
height:60px;
margin-top : 40px;
text-align: center ;
font-size: 10px ;
font-family: 'Lato' ;
}
#media screen and (min-width: 480px) {
form {
max-width: 480px;
}
}
For your css, try
#footer {
position: relative;
...
}
Also for the horizontal line just use
<hr>
html tag above footer
(sorry about that, my editing looks awkward because stackoverflow prints out a horizontal line whenever I use that tag)
Also its more simple and if you want minimal changes to css.
http://jsfiddle.net/750h2crz/7/
I would simply use separate tag for footer sec and use Horizontal Rule tag
<div id="footer">
<hr>
<footer>
About
Instructions
Encountered an issue?
<footer>
</div>
Thx
Remove the position: absolute in your style:
#footer {
position: absolute;
/* ... */
}
FIDDLE: https://jsfiddle.net/lmgonzalves/750h2crz/2/
put this in your css, and use a border instead of a horizontal line.
footer {
position: absolute;
bottom: 0;
height: 60px;
border-top-width: 5px;
border-top-style: solid;
border-top-color: #FFF;
}
updated your css with
#footer {
position:fixed;
width:100%; /* fill the whole width of the screen */
border-top:1px solid #aaa; /* you can change to whatever color you want */
padding-top:10px; /* add some spacing between line and links/text */
background:#fff; /* this is important otherwise your background will be transparent, change the color based on your needs */
/* ... your other properties */
}
Also updated you body styling with some padding at the bottom to offset the footer
body {
/* ... your other properties */
padding-bottom:65px;
}
Can someone explain why the element below the floated element gets displaced as if it had a padding of a width of the floated element?
HTML and CSS:
div.filter { border: 1px solid #aaaaaa; padding: 0 10px 10px 10px; width: 300px;}
div.filterTitle { float:left; padding: 5px; margin:-12px 0 0 10px; background:#fff; }
div.filter label { display:inline-block; width: 120px; font-weight: bold; margin-top: 15px;}
div.filter input[type="text"] { width: 146px; }
<div class="filter">
<div class="filterTitle">Filters</div>
<form id="filterForm" method="post" action="">
<div>
<label for="dateFrom" class="optional">Date</label>
<input type="text" name="dateFrom" id="dateFrom" value="">
</div>
</form>
</div>
FIDDLE: jsFiddle
It's not clear exactly what you are asking but based on comments I think this is just a case of clearing the float.
/* filters menu */
div.filter {
border: 1px solid #aaaaaa;
padding: 0 10px 10px 10px;
width: 300px;
}
div.filterTitle {
float:left;
padding: 5px;
margin:-12px 0 0 10px;
background:#fff;
}
form {
clear: both;
}
div.filter label {
display:inline-block;
width: 120px;
font-weight: bold;
margin-top: 15px;
}
div.filter input[type="text"] {
width: 146px;
}
<div class="filter">
<div class="filterTitle">Filters</div>
<form id="filterForm" method="post" action="">
<div>
<label for="dateFrom" class="optional">Date</label>
<input type="text" name="dateFrom" id="dateFrom" value=""/>
</div>
</form>
</div>
You might also want to look into the fieldset and legend elements which would seem to be more inline with the look you seem to be aiming for.
Fieldset # MDN
Quick JSfiddle Demo
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance.
Closed 10 years ago.
I have created a form and it is supposed to look like this:
Can someone please help me edit my code to look like the above image and explain what I was doing wrong? A JSFiddle would be amazing so I can understand how to fix it.
The zip label and field needs to be brought up and the submit button pushed to the right, yet it's not working for me :(
My attempt is as follows:
http://jsfiddle.net/2w6mK/
CSS:
#form-container {
width: 710px;
height: 450px;
padding: 20px 50px;
margin: 35px 0 0 25px;
}
form {
position: relative;
margin-left: -10px;
}
form label {
display: block;
font: normal 12px/16px arial, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #000;
text-transform: uppercase;
text-align: left;
}
form [type="text"],
form [type="email"] {
display: block;
border: 1px solid #000;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font: 12px/14px arial, helvetica, verdana, sans-serif;
width: 60%;
padding: 5px 5px;
margin: 5px 0;
-webkit-appearance: none;
}
.zip {
display: block;
border: 1px solid #000;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font: 12px/14px arial, helvetica, verdana, sans-serif;
width: 20%;
padding: 5px 5px;
margin: 5px 0;
-webkit-appearance: none;
}
.dob-select {
display: block;
border: 1px solid #000;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font: 12px/14px arial, helvetica, verdana, sans-serif;
width: 80px;
height:25px;
-webkit-appearance: none;
overflow: hidden;
background: url("http://s17.postimage.org/4tmf81arf/down_arrow.png") no-repeat right #fff;
float: left;
margin-right: 5px;
}
.dob-select select {
background: transparent;
width: 125px;
height: 25px;
border: none;
padding: 5px 0 0 5px;
color: #cccccc;
}
.left {
float: left;
}
form [type="submit"] {
display: block;
background-image: url("http://findmuck.files.wordpress.com/2012/06/green_submit_button_by_rukiaxichigo15.jpg") no-repeat;
margin: 25px auto;
width: 154px;
height:57px;
border: none;
color: transparent;
font-size: 0;
float: left;
}
form input[type=submit]:hover {
background-image: url("http://findmuck.files.wordpress.com/2012/06/green_submit_button_by_rukiaxichigo15.jpg") no-repeat;
cursor: hand;
cursor: pointer;
}
#FileUpload {
position:relative;
margin-top: -13px;
padding-bottom: 15px;
}
#BrowserVisible {
position: absolute;
top: 0;
left: 0;
z-index: 1;
background:url(images/btn_browse.gif) 100% 0px no-repeat;
height:27px;
width:390px;
cursor: hand;
cursor: pointer;
}
#FileField {
display: block;
margin-right: 85px;
border: 1px solid #000;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font: 12px/14px arial, helvetica, verdana, sans-serif;
color: #777;
width: 300px;
padding: 5px 5px;
-webkit-appearance: none;
}
HTML:
<div id="form-container">
<form>
<fieldset>
<label for="name">Name</label>
<input type="text" name="name">
</fieldset>
<fieldset>
<label for="dob">date of birth</label>
<div class="dob-select">
<select name="dob_day">
<option value="01">01</option>
</select>
</div>
<div class="dob-select">
<select name="dob_month">
<option value="01">Jan</option>
</select>
</div>
<div class="dob-select">
<select name="dob_year">
<option value="2012">2012</option>
</select>
</div>
</fieldset>
<fieldset>
<label for="zip">zip</label>
<input type="text" class="short" name="zip">
</fieldset>
<fieldset>
<label for="email">Email</label>
<input type="email" name="email">
</fieldset>
<fieldset>
<label for="subscribe"><input type="checkbox" class="left"> <p class="left">Tick</p></label>
<input type="submit" name="submit">
</fieldset>
</form>
</div>
EDIT 2:
Add
.short{
width: auto !important;
}
to CSS to draw the ZIP field with full lenght as in picture.
EDIT: remove border: 1px solid silver; when you have understood how positioning is working, it's for debug purpose ;)
Look at: http://jsfiddle.net/pb6mM/3/
form input[type="submit"]{
position: absolute;
right: 0;
bottom: 0;
}
fieldset{
border: 1px solid silver;
}
.fieldsetDate{
padding-right: 30px;
}
.inlineBlock{
display: inline-block;
}
And added
margin-top: 6px;
margin-bottom: 6px;
to .dob-select { to make it the same height of the normal text field.
HTML:
<div id="form-container">
<form>
<fieldset>
<label for="name">Name</label>
<input type="text" name="name">
</fieldset>
<fieldset class="fieldsetDate inlineBlock">
<label for="dob">date of birth</label>
<div class="dob-select">
<select name="dob_day">
<option value="01">01</option>
</select>
</div>
<div class="dob-select" >
<select name="dob_month">
<option value="01">Jan</option>
</select>
</div>
<div class="dob-select">
<select name="dob_year">
<option value="2012">2012</option>
</select>
</div>
</fieldset>
<fieldset class="inlineBlock">
<label for="zip">zip</label>
<input type="text" class="short" name="zip">
</fieldset>
<fieldset>
<label for="email">Email</label>
<input type="email" name="email">
</fieldset>
<fieldset>
<label for="subscribe"><input type="checkbox" class="left"> <p class="left">Tick</p></label>
<input type="submit" name="submit">
</fieldset>
</form>
</div>
Add Position:absolute to input button. and there is slight changes in the html code. Check the demo.
DEMO
SAMPLE CSS FORM