I have about 30px of vertical space between the radio buttons. Setting margin-top and margin-bottom to 0px had no effect. How can I eliminate the vertical space?
body {
margin: 2em;
font-family: Arial, Helvetica, sans-serif;
}
input[type="radio"] {
opacity: 0;
}
input[type="radio"]+label {
cursor: pointer;
border: 1px solid #ccc;
background: #efefef;
color: #aaa;
border-radius: 3px;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0);
display: block;
width: 200px;
height: 40px;
padding-left: 20px;
margin-top: 0px;
margin-bottom: 0px;
}
input[type="radio"]:checked+label {
background: #777;
border: 1px solid #444;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
color: white;
margin-top: 0px;
margin-bottom: 0px;
}
<input id="Radio1" name="Radios" type="radio">
<label for="Radio1">I am option1</label>
<input id="Radio2" name="Radios" type="radio" value="Option 2">
<label for="Radio2">I am option2</label>
<input id="Radio3" name="Radios" type="radio" value="Option 3">
<label for="Radio3">I am option3</label>
View on JSFiddle
If your intent is to hide the radio buttons themselves and just have the labels visible, then just apply a position: absolute to remove them from the page flow:
input[type="radio"] {
opacity: 0;
position: absolute;
}
https://jsfiddle.net/99b6pbz7/
remove it from the flow (absloute)
https://jsfiddle.net/0d227oj6/1/
body {
margin: 2em;
font-family: Arial, Helvetica, sans-serif;
}
input[type="radio"] {
opacity: 0;
position:absolute;/* removed from the flow */
}
input[type="radio"]+label {
cursor: pointer;
border: 1px solid #ccc;
background: #efefef;
color: #aaa;
border-radius: 3px;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0);
display: block;
width: 200px;
height: 40px;
padding-left: 20px;
margin-top: 0px;
margin-bottom: 0px;
}
input[type="radio"]:checked+label {
background: #777;
border: 1px solid #444;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
color: white;
margin-top: 0px;
margin-bottom: 0px;
}
<input id="Radio1" name="Radios" type="radio">
<label for="Radio1">I am option1</label>
<input id="Radio2" name="Radios" type="radio" value="Option 2">
<label for="Radio2">I am option2</label>
<input id="Radio3" name="Radios" type="radio" value="Option 3">
<label for="Radio3">I am option3</label>
just hide the actual radio buttons.
input[type="radio"] {
display: none;
}
Related
I am adding the following code to my CSS file for my parent div .outertContainer but the border-radius is only affecting the top two corners and not the bottom two corners. I cannot seem to figure it out. Everything else seems to work fine.
*{
background-color: white;
margin: 0;
padding: 0;
}
.outerContainer{
position: absolute;
border-radius: 9px;
top:23%;
right: 10%;
width:30%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 4px 14px 0 rgba(0, 0, 0, 0.17);
}
.input-form-control{
margin-top: 20px;
margin-left: 16px;
width: 80%;
padding: 16px 24px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: white;
line-height: 10px;
font-size: 16px;
}
::placeholder {
color: #99a3a4;
}
.submit-btn{
margin-top: 18px;
margin-left: 17px;
margin-bottom: 65px;
border-radius: 4px;
border: none;
color: white;
padding: 13px 20px;
width: 92%;
text-align: center;
text-decoration: none;
display: inline-block;
}
The following is the html code:
<div className="LoginPage">
<div className="outerContainer">
<form name="form">
<div className="emailLabelInput">
<input type="text" className="login-form-control" name="email" placeholder="Email address"/>
</div>
<div className="passwordLabelInput">
<input type="password" className="login-form-control" name="password" placeholder="Password"/>
</div>
<div className="form-group">
<button className="submit-btn">Log in</button>
</div>
</form>
</div>
</div>
Your problem is you have * { background: white; } which makes the background of all the elements white. Since the form is just as large as the outerContainer and does NOT have a border-radius, it effectively covers up the border-radius applied to the outerContainer. So you have two options to fix the problem:
1 — Remove * { background: white; }. This works for the most part except that the two inputs are still positioned in the top left corner of the outerContainer and of course still covering that corner. If you have those positioned a little differently, this would work.
2 — Add padding: 10px to the outerContainer. This will give the outerContainer a little bit of 'breathing room' and keep the form from covering the corners. See the snippet below.
*{
background:white;
margin: 0;
padding: 0;
}
.LoginPage{
height:100vh;
width:100vw;
}
.outerContainer{
padding:10px; /* Added to show radius */
position: absolute;
border-radius: 9px;
top:23%;
right: 10%;
width:30%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1), 0 4px 14px 0 rgba(0, 0, 0, 0.17);
}
.input-form-control{
margin-top: 20px;
margin-left: 16px;
width: 80%;
padding: 16px 24px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: white;
line-height: 10px;
font-size: 16px;
}
::placeholder {
color: #99a3a4;
}
#error-message{
border: 1px solid #ff7f50;
margin-top: 10px;
margin-left: 16px;
width: 80%;
padding: 16px 24px;
border-radius: 4px;
line-height: normal;
font-size: 15px;
}
.submit-btn{
margin-top: 18px;
margin-left: 17px;
margin-bottom: 65px;
border-radius: 4px;
border: none;
color: white;
padding: 13px 20px;
width: 92%;
text-align: center;
text-decoration: none;
display: inline-block;
}
<div class="LoginPage">
<div class="outerContainer">
<form name="form">
<div class="emailLabelInput">
<input type="text" class="login-form-control" name="email" placeholder="Email address"/>
</div>
<div class="passwordLabelInput">
<input type="password" class="login-form-control" name="password" placeholder="Password"/>
</div>
<div class="form-group">
<button class="submit-btn">Log In</button>
</div>
</form>
</div>
</div>
I'm having difficulty with the following code - everything works as I wish it EXCEPT the contents of the check boxes. The ticks and crosses are too low.
Can someone tell me what I am doing wrong here please? I admit I hacked this code from several sources and glued it together, so I'm more than happy to admit I have misunderstood something or other.
Thanks!
.checkbox {
display: inline-block;
float: left;
width: 25%;
font-size: 16px;
line-height: 36px;
text-align: left;
}
input[type=checkbox] {
display: none;
}
.checkbox:before {
display: inline-block;
width: 18px;
height: 18px;
content: "\2715\0020";
background-color: #f3f3f3;
color: #000000;
text-align: center;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
border-radius: 3px;
margin: 0px 10px 0px 0px;
vertical-align: middle;
}
input[type=checkbox]:checked+.checkbox:before {
color: #f3f3f3;
background-color: #abcdef;
content: "\2714\0020";
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
}
<section>
<form>
<input id="option1" type="checkbox">
<label class="checkbox" for="option1">Unchecked</label>
<input id="option2" type="checkbox" checked>
<label class="checkbox" for="option2">Checked, changeable</label>
<input id="option3" type="checkbox" checked disabled>
<label class="checkbox" for="option3">Checked, fixed</label>
<input id="option4" type="checkbox" checked disabled>
<label class="checkbox" for="option4">Checked, fixed</label>
<input id="option5" type="checkbox">
<label class="checkbox" for="option5">Unchecked</label>
</form>
</section>
Add line-height to .checkbox:before{...} set it to 20px, or play this number,
.checkbox:before {
display: inline-block;
width: 18px;
height: 18px;
content: "\2715\0020";
background-color: #f3f3f3;
color: #000000;
text-align: center;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
border-radius: 3px;
margin: 0px 10px 0px 0px;
vertical-align: middle;
line-height: 20px;
}
Add line-height: 1.2; to your .checkbox:before:
.checkbox:before {
display: inline-block;
width: 18px;
height: 18px;
content: "\2715\0020";
background-color: #f3f3f3;
color: #000000;
text-align: center;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
border-radius: 3px;
margin: 0px 10px 0px 0px;
vertical-align: middle;
line-height: 1.2; /* add this*/
}
.checkbox {
display: inline-block;
float: left;
width: 25%;
font-size: 16px;
line-height: 36px;
text-align: left;
}
input[type=checkbox] {
display: none;
}
.checkbox:before {
display: inline;
padding:2px;
width: 18px;
height: 18px;
content: "\2715\0020";
background-color: #f3f3f3;
color: #000000;
text-align: center;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
border-radius: 3px;
margin: 0px 10px 0px 0px;
vertical-align: middle;
}
input[type=checkbox]:checked+.checkbox:before {
color: #f3f3f3;
background-color: #abcdef;
content: "\2714\0020";
text-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
}
<section>
<form>
<input id="option1" type="checkbox">
<label class="checkbox" for="option1">Unchecked</label>
<input id="option2" type="checkbox" checked>
<label class="checkbox" for="option2">Checked, changeable</label>
<input id="option3" type="checkbox" checked disabled>
<label class="checkbox" for="option3">Checked, fixed</label>
<input id="option4" type="checkbox" checked disabled>
<label class="checkbox" for="option4">Checked, fixed</label>
<input id="option5" type="checkbox">
<label class="checkbox" for="option5">Unchecked</label>
</form>
</section>
I'm trying to left align labels keeping input-fields right-aligned without success!
I was able to align labels or input-fields but not both of them! I've tried a lot of things but nothing worked
html:
<body style="background-color:lightgray;">
<center> <div class="form-style-2">
<div class="form-style-2-heading">Info</div>
<form action="" method="POST">
<label for="cod"><span>Cod <span class="required">*</span></span><input type="text" class="input-field" name="cod" value="" /></label>
<label for="name" ><span>Name <span class="required">*</span></span><input type="text" class="input-field" name="name" value="" /></label>
<label for="phone"><span>Phone <span class="required">*</span></span><input type="text" class="input-field" name="phone" value="" /></label>
<label for="address"><span>Address <span class="required">*</span></span><input type="text" class="input-field" name="address" value="" /></label>
<label><span> </span><input type="submit" value="Submit" /></label>
</form></center>
</div>
</body>
css
.form-style-2{
max-width: 500px;
padding: 20px 12px 10px 20px;
font: 13px Arial, Helvetica, sans-serif;
}
.form-style-2-heading{
font-weight: bold;
font-style: italic;
border-bottom: 2px solid #000;
margin-bottom: 20px;
font-size: 15px;
padding-bottom: 3px;
}
.form-style-2 label{
display: block;
margin: 0px 0px 15px 0px;
}
.form-style-2 label > span{
width: 100px;
font-weight: bold;
float: left;
padding-top: 8px;
padding-right: 5px;
}
.form-style-2 span.required{
color:red;
}
.form-style-2 input.input-field{
width: 48%;
}
.form-style-2 input.input-field,
.form-style-2 .textarea-field{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
border: 1px solid #C2C2C2;
box-shadow: 1px 1px 4px #EBEBEB;
-moz-box-shadow: 1px 1px 4px #EBEBEB;
-webkit-box-shadow: 1px 1px 4px #EBEBEB;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
padding: 7px;
outline: none;
}
.form-style-2 .input-field:focus,
.form-style-2 .textarea-field:focus{
border: 1px solid #0C0;
}
.form-style-2 .textarea-field{
height:100px;
width: 55%;
}
.form-style-2 input[type=submit],
.form-style-2 input[type=button]{
border: none;
padding: 8px 15px 8px 15px;
background: #4CAF50;
color: #fff;
box-shadow: 1px 1px 4px #DADADA;
-moz-box-shadow: 1px 1px 4px #DADADA;
-webkit-box-shadow: 1px 1px 4px #DADADA;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}
.form-style-2 input[type=submit]:hover,
.form-style-2 input[type=button]:hover{
background: #EA7B00;
color: #fff;
}
jfiddle: https://jsfiddle.net/uv21fc5o/
You don't want to use the <center> tag. Try using auto margins as I've done here:
https://jsfiddle.net/uv21fc5o/1/
.form-style-2{
max-width: 500px;
padding: 20px 12px 10px 20px;
font: 13px Arial, Helvetica, sans-serif;
margin: 0 auto;
}
Align the text left like so:
CSS
.form-style-2 label > span {
text-align: left;
}
I am trying to css the input type radio button, and it does not work. The problem is that the input tag is inside the label tag and I am not able to change it.
input{
display:none;
}
label:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
bottom: 1px;
background-color: #aaa;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
input[type=radio]:checked + label:before {
content: "\2022";
color: #f3f3f3;
font-size: 30px;
text-align: center;
line-height: 18px;
}
<label for="female"><input id="female" type="radio" name="gender" value="female">Female</label>
.control{
vertical-align: middle;
display: inline-block;
}
input{
margin-right: 10px;
}
input:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-left: -1px;
background-color: #aaa;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
input[type=radio]:checked:before {
content: "\2022";
color: #f3f3f3;
font-size: 30px;
text-align: center;
line-height: 18px;
}
<input id="female" class="control" type="radio" name="gender" value="female">
<label for="female" class="control">
Female</label>
You have to have an inner substitute for your input because the + only selects the next element on the same level.
input{
display:none;
}
span:before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
bottom: 1px;
background-color: #aaa;
box-shadow: inset 0px 2px 3px 0px rgba(0, 0, 0, .3), 0px 1px 0px 0px rgba(255, 255, 255, .8);
}
input[type=radio]:checked + span:before {
content: "\2022";
color: #f3f3f3;
font-size: 30px;
text-align: center;
line-height: 18px;
}
<label for="female">
<input id="female" type="radio" name="gender" value="female">
<span for="female"></span>
Female
</label
Pls try to put your label after input:radio
<input id="female" type="radio" name="gender" value="female">
<label for="female"> Female.</label>
I have simple form, it is styled in css. JSfiddle link : here
<form action="" method="post" class="basic-grey">
<h1>Report a problem
</h1>
<label>
<span>Your Name :</span>
<input id="name" type="text" name="name" placeholder="Your Name" />
</label>
<label>
<span>Your Email :</span>
<input id="email" type="email" name="email" placeholder="Valid Email Address" />
</label>
<label>
<span>Message :</span>
<textarea id="message" name="message" placeholder="Specify The Problem"></textarea>
</label>
<label>
<span>Subject :</span><select name="selection">
<option value="Job Inquiry">Job Inquiry</option>
<option value="General Question">General Question</option>
</select>
</label>
<label>
<span> </span>
<input type="submit" name="submit" value="Submit" class="button">
</label>
</form>
Here is css style. Problem is that button have big hover area (on left side). I upload example on webhosting. here you can see what i think I tried position:absolute for button but i can not change position. Position:relative does not work too.
.basic-grey {
margin-left:auto;
margin-right:auto;
max-width: 500px;
padding: 25px 15px 25px 10px;
font: 12px Georgia, "Times New Roman", Times, serif;
color: #000;
text-shadow: 1px 1px 1px #FFF;
}
.basic-grey h1 {
font-size: 25px;
padding: 0px 0px 10px 40px;
display: block;
border-bottom:1px solid #C9C9C9;
margin: -10px -15px 30px -10px;;
color: #000;
}
.basic-grey h1>span {
display: block;
font-size: 11px;
}
.basic-grey label {
margin: 0px;
}
.basic-grey label>span {
float: left;
width: 20%;
text-align: right;
padding-right: 10px;
margin-top: 10px;
color: #000;
}
.basic-grey input[type="text"], .basic-grey input[type="email"], .basic-grey textarea, .basic-grey select {
border: 1px solid #DADADA;
color: #000;
height: 30px;
margin-bottom: 16px;
margin-right: 6px;
margin-top: 2px;
outline: 0 none;
padding: 3px 3px 3px 5px;
width: 70%;
font-size: 12px;
line-height:15px;
box-shadow: inset 0px 1px 4px #ECECEC;
-moz-box-shadow: inset 0px 1px 4px #ECECEC;
-webkit-box-shadow: inset 0px 1px 4px #ECECEC;
}
.basic-grey textarea{
padding: 5px 3px 3px 5px;
}
.basic-grey select {
appearance:none;
-webkit-appearance:none;
-moz-appearance: none;
text-indent: 0.01px;
text-overflow: '';
width: 70%;
height: 35px;
line-height: 25px;
}
.basic-grey textarea{
height:100px;
}
.basic-grey.button {
opacity:0.7;
background: #55596C;
padding: 10px 15px 10px 15px;
color: #FFF;
box-shadow: 1px 1px 5px #B6B6B6;
border-radius: 3px;
text-shadow: 1px 1px 1px #000;
cursor: pointer;
}
.basic-grey.button:hover {
opacity:0.7;
background: #373E4D;
}
It's caused by the <label></label> that your button is enclosed in. Just enclose it in a div instead:
<div>
<span> </span>
<input type="submit" name="submit" value="Submit" class="button">
</div>
If you want this div to look the same as the label, you can give it a css class, e.g. class="label" and assign the same CSS properties to "div.label" and "label".
Remove span before input and set margin-left for input. jsfiddle
<label>
<input style="margin-left: 110px" type="submit" name="submit" value="Submit" class="button">
</label>