i can't get this radio button with image horizontally e.g radio-image,radio-image,radio-image etc.
can someone help me out. The html code is
<fieldset id="CreditCard">
<legend>Credit Card (required)</legend>
<fieldset class="optionGroup">
<label>
<input type="radio" name="ccard"><img src="discover.png" alt="discover card">
</label>
<label>
<input type="radio" name="ccard"> <img src="diners.png" alt="diners card">
</label>
<label>
<input type="radio" name="ccard"><img src="master.png" alt="master card">
</label>
<label>
<input type="radio" name="ccard"><img src="visa.png" alt="visa card">
</label>
</fieldset>
And the css code is
fieldset.optionGroup
{
float: none;
margin-left: 25%;
}
fieldset.optionGroup label
{
display: inline;
float: none;
width: 100px;
}
fieldset.optionGroup input
{
float:none;
margin: 0px;
width: 20px;
}
Fiddle
Use position css rule.
fieldset.optionGroup input {
float: none;
margin: 0;
position: relative;
top: -16px;
width: 20px;
}
Demo
Give this:
fieldset.optionGroup,
fieldset.optionGroup label,
fieldset.optionGroup input
{
display: inline;
vertical-align: middle;
}
Simply add this one line to your css and it should work:
fieldset img{
vertical-align:middle;
}
Related
I have square component with selector 'app-square':
<input type="text"/>
I have styles for that component:
input[type=text] {
width: 40px;
height: 40px;
font-size: 15pt;
text-align: center;
}
And i want that there will be no gap between two app-square elements.
<app-square></app-square>
<app-square></app-square>
Now, you can notice a little gap betweet elements:
I do not want that gap between elements, how should i achieve it?
It is generating for you putting the every element in new lines. You can remove it by keep them in same line without white-space like following:
<input type="text"/><input type="text"/><input type="text"/><input type="text"/><input type="text"/><input type="text"/>
Or by using CSS force:
.clearfix::after {
display: table;
content: "";
clear: both;
}
input[type=text] {
width: 40px;
height: 40px;
font-size: 15pt;
text-align: center;
display: block;
float: left;
margin: 0;
vertical-align: top;
}
<div class='clearfix'>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
</div>
That is caused by the display property which is set as inline-block by default. It adds a gap between the elements.
So you could use a negative margin, or instead of inline-block float them.
The preferred way is floating them:
.container::before,
.container::after {
display: table;
content: " ";
clear: both;
}
input {
float: left;
width: 40px;
height: 40px;
font-size: 15pt;
text-align: center;
}
<div class="container">
<input value="0" />
<input value="0" />
<input value="0" />
<input value="0" />
<input value="0" />
<input value="0" />
</div>
Don't forget to clear the floating elements using the following css on the container of the floated elements.
.container::before,
.container::after {
display: table;
content: " ";
clear: both;
}
I am adding background image on radio button. But my issue is image is not on checked or click on radio button(background image).
Here is my code
.form-group input[type="radio"] {
display: none;
}
.gender input[type="radio"] + label::after {
background:url('img/male.png') no-repeat -7px -81px;
width: 28px;
height: 56px; }
.gender input[type="radio"]:checked + label::before {
background:url('img/m-f-icon.png') no-repeat;
width: 28px;
height: 56px;
display: inline-block;
position: relative;
content: ' ';
margin-right: 10px;
cursor: pointer;
background-position-x: -45px;
}
<div class="form-group gender">
<label class="control-label col-xs-2">I'm a</label>
<div class="col-xs-1">
<input type="radio" class="male" name="genderRadios" value="male">
<label class="radio-inline gender"></label>
</div>
<div class="col-xs-1">
<input type="radio" class="female" name="genderRadios" value="female">
<label class="radio-inline gender"></label>
</div>
</div>
Kindly advise me any solution.
Please find demo below I have put together, this is the correct structure you should be using with the appropriate for specified on each of your labels that match the related radio button. You can switch out the background colours for background images of your choice.
JSFiddle:
https://jsfiddle.net/kdrh56md/
I have a simple HTML form with some validations but the text labels get misplaced when the form appears.
This is the form before (PLEASE NOTE: The red square around it is not part of the form, I just placed it with Paint to help you see the problem quick):
And after:
Any hint to keep the label aligned with the text field please?
UPDATE:
This is the code:
<form name="senstageaddform">
<div class="form-element">
<label for="ed_senStartDate" class="text-label">
{{i18n "EDUCATION_SEN_START_DATE"}} <span class="required">*</span>
</label>
<input type="text" class="date standard-text-field" maxlength="16" id="ed_senStartDate" name="startDate"/>
</div>
<div class="form-element">
<label for="ed_senEndDate" class="text-label">{{i18n "EDUCATION_SEN_END_DATE"}}</label>
<input type="text" class="date standard-text-field" maxlength="16" id="ed_senEndDate" name="endDate"/>
</div>
</form>
Here is the CSS:
.form-element {
display: inline-block; margin: 5px; width: 98%; clear: both; vertical-align:top
.text-label {
width: 20%; text-align: right; display: inline-block; padding: 3px 5px 0px 1px;
}
.standard-text-field {
width: 10em;
}
I am trying to use images in place of radio buttons. When I don't use images I can select the 'male/female' value correctly. However, when I stylize the css to use images the value always defaults to male. The image used is a sample. Can you please help point out my error in the code below. Also, can anyone provide any pointers on how to use different images for the different radio buttons.
HTML:
<input type="radio" id="genderMale" name="gender" value="male"/>
<label for="genderMale"></label>
<input type="radio" id="genderFemale" name="gender" value="female"/>
<label for="genderFemale"></label>
CSS:
input[type="radio"] {
display:none;
}
input[type="radio"] + label {
display:inline;
font-size: 18px;
}
input[type="radio"] + label:before {
content:'';
display:inline-block;
width: 320px;
height: 320px;
background: url(http://www.clker.com/cliparts/T/2/s/A/0/e/male-bathroom-bw-w-o-boarder-md.png) no-repeat;
vertical-align: middle;
}
input[type="radio"]:checked + label:before {
content:'';
background: url(http://www.clker.com/cliparts/T/2/s/A/0/e/male-bathroom-bw-w-o-boarder-md.png) no-repeat;
border-style: solid;
border-width: 10px;
}
You don't need to use :before for this when you can just place the img tag within your label like so:
<input type="radio" id="genderMale" name="gender" value="male"/>
<label for="genderMale">
<img src="..." />
</label>
<input type="radio" id="genderFemale" name="gender" value="female"/>
<label for="genderFemale">
<img src="..." />
</label>
And then remove the :before from your CSS
Fiddle: http://jsfiddle.net/L94mK/
As far as i can see, it's returning the proper value... check this JSFiddle
as for giving different images for the radio buttons, you can use nth-child css selector as follows:
input[type="radio"]:nth-child(1) + label:before {
content:'';
display:inline-block;
width: 320px;
height: 320px;
background: url(http://www.clker.com/cliparts/T/2/s/A/0/e/male-bathroom-bw-w-o-boarder-md.png) no-repeat;
vertical-align: middle;
}
input[type="radio"]:nth-child(3) + label:before {
content:'';
display:inline-block;
width: 320px;
height: 320px;
background: url(some other url for female image) no-repeat;
vertical-align: middle;
}
Check this JSFiddle
Assuming the following markup:
<fieldset>
<legend>Radio Buttons</legend>
<ol>
<li>
<input type="radio" id="x">
<label for="x"><!-- Insert multi-line markup here --></label>
</li>
<li>
<input type="radio" id="x">
<label for="x"><!-- Insert multi-line markup here --></label>
</li>
</ol>
</fieldset>
How do I style radio button labels so that they look like the following in most browsers (IE6+, FF, Safari, Chrome:
I believe this does it all. You didn't mention that it has to validate, however, so I used the inline-block (-moz-inline-box) display. One of my favorites, actually.
Here's a working copy
Tested in Safari 3, FireFox 3, and IE7.
<style type="text/css">
ol{
padding-left: 0;
margin-left:0;
}
ol>li {
list-style-type: none;
margin-bottom: .5em;
}
ol>li input[type=radio] {
display: -moz-inline-box;
display: inline-block;
vertical-align: middle;
}
ol>li label {
display: -moz-inline-box;
display: inline-block;
vertical-align: middle;
}
</style>
Using the following markup and css I was able to produce multi-line labels that do not wrap under the radio button:
<style type="text/css">
fieldset input, label {
float: left;
display: block;
}
fieldset li {
clear: both;
}
</style>
<fieldset>
<ol>
<li>
<input type="radio" id="x" />
<label for="x">
stuff<br/>
stuff1
</label>
</li>
<li>
<input type="radio" id="x" />
<label for="x">
stuff<br/>
stuff1
</label>
</li>
</ol>
</fieldset>
however I was unable to use:
fieldset label {
vertical-align: middle;
}
to center the label vertically on the radio button, even when applying a width (both suggestions in Dmitri Farkov's answer. My main purpose was to prevent wrapping under the radio button, so this solution will be fine for the time being.
Since I asked how to handle really long labels above, and I finally solved it myself. Here is the solution to my problem. Maybe it could help you to?
<style type="text/css">
#master_frame {
background: #BBB;
height: 300px;
width: 300px;
}
fieldset.radios {
border: none;
}
fieldset fields {
clear: both;
}
input {
float: left;
display: block;
}
label {
position: relative;
margin-left: 30px;
display: block;
}
</style>
<div id="master_frame">
<fieldset class='radios'>
<div class='field'>
<input type="radio" id="a" />
<label for="a">Short</label>
</div>
<div class='field'>
<input type="radio" id="b" />
<label for="b">
A really long and massive text that does not fit on one row!
</label>
</div>
</fieldset>
</div>
Make input and label both
float: left;
display: block;
Set width's for the label and input.
apply
clear: both;
vertical-align: middle;
to all the li's.
You should use white-space: normal; in label for multiline