I have a problem with the text after a checkbox. It is not aligned properly (the checkbox is too high) and since I am just starting to learn css and coding, I don't understand the solutions that were given to this problem on other sites. Here is an image of what it looks like right now and would appreciate any help on what to put in custom css in order to have the box properly aligned. Thank you!
https://www.dropbox.com/s/s46g9bb1u0ymrlf/checkbox.JPG?dl=0
.legal label input[type=checkbox] {
vertical-align: middle;
}
form .form-row .input-checkbox {
display: inline;
margin: -2px 8px 0 0;
text-align: center;
vertical-align: middle;
}
.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox],
.radio input[type=radio], .radio-inline input[type=radio] {
float: left;
margin-left: -20px;
}
input[type=checkbox], input[type=radio] {
margin: 4px 0 0;
margin-top: 1px\9;
line-height: normal;
input[type=checkbox], input[type=radio] {
box-sizing: border-box;
padding: 0;
}
`
There can't be able to help without code
<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
I have a car
Please check the below example
Related
I need to display a cross mark inside unchecked checkbox. I have written a code like this:
HTML:
<input type="checkbox" class="cls-1"/>
CSS:
.cls-1:not(:checked):after {
content: '\00D7';
margin: 0px 0px 0px 2px;
}
The alignment of cross-mark is not correct though. There appears a space between checkbox top and cross mark top. Is there a way to make cross mark appear exactly at center.
Stackblitz for sample code can be found here: https://stackblitz.com/edit/js-ul1sgb
try this
h1, h2 {
font-family: Lato;
}
.cls-1:not(:checked):after {
content: '\00D7';
margin: 0px 0px 0px 2px;
position: absolute;
top:-2px;
}
.cls-1 {
position:relative
}
<div id="app1">
<input type="checkbox" class="cls-1"/>
</div>
can you try adding a line-height property to the input type checkbox,
say 10px;
eg:
input {
line-height: 10px;
}
Just add display: flex; align-items: center; in .cls-1. Thanks
.cls-1 {
display: flex;
align-items: center;
}
I've modified your css to center the cross. Use line-height of 0.5rem to achieve this.
h1, h2 {
font-family: Lato;
}
.cls-1:not(:checked):after {
content: '\00D7';
margin: 0px 0px 0px 2px;
display: inline-block;
vertical-align: text-top;
line-height: 0.5rem;
}
<div id="app1">
<input type="checkbox" class="cls-1"/>
</div>
I am trying to override checkbox css in angular.js .It works fine for normal javascript code.
Plunker : https://plnkr.co/edit/gkWm0lgEZ7N88TINcsRS?p=preview
If you remove the css it works fine.
<input type="checkbox" ng-model="checkboxModel.value1" >
CSS:
input[type=checkbox]:checked + label:before {
content: '';
text-shadow: 1px 1px 1px #10758C;
font-size: 24px;
color: #f3f3f3;
text-align: center;
line-height: 24px;
background: url('http://cnt.in.bookmyshow.com/bmsin/SLIMG/1_4.gif') !important;
}
label {
display: inline-block;
cursor: pointer;
position: relative;
padding-left: 28px;
margin-right: 12px;
font-size: 16px;
line-height: 22px;
font-weight: bold;
}
input[type=radio], input[type=checkbox] {
display: none;
}
label:before {
font-weight: normal;
content: '';
display: inline-block;
width: 18px;
height: 18px;
margin-right: 10px;
position: absolute;
left: 0;
bottom: 1px;
background: url('http://cnt.in.bookmyshow.com/bmsin/SLIMG/1_1.gif?v1');
}
The issue is that the '+' css selector used, is unable to find any matching DOM i.e the label is wrapping the input and no label is present following/after the input, as per the DOM structure in the Plunker link .
Approach 1:
You could use the following DOM structure and modify your CSS to replace all occurrences of label to i
<label>
<input />
<i></i>
</label>
Approach 2:
You could use the following DOM structure and modify your CSS to replace all occurrences of label to input + label (To avoid css being applied to the wrapper label). [Note this approach needs the checkbox to have an id and for the label following it to have a for attribute.]
<label>
<input id="chk1" />
<label for="chk1"></label>
</label>
Hope this helps!
I have a jsfiddle here - https://jsfiddle.net/5qmnptuk/4/
I'm trying to craete a custom radio button.
Ive hidden the radio button and then created the new one with :after on the label.
I'm trying to use :checked to style the clicked but its not working
Can anyone see why this doesn't work.
.form-group{
margin-top: 30px;
}
label{
cursor: pointer;
display: inline-block;
position: relative;
padding-right: 25px;
margin-right: 15px;
}
label:after{
bottom: -1px;
border: 1px solid #aaa;
border-radius: 25px;
content: "";
display: inline-block;
height: 25px;
margin-right: 25px;
position: absolute;
right: -31px;
width: 25px;
}
input[type=radio]{
display: none;
}
input[type=radio]:checked + label{
content: \2022;
color: red;
font-size: 30px;
text-align: center;
line-height: 18px;
}
There are several problems with your code:
1 - Your input needs to be before the label
The + and ~ CSS selectors only select siblings after an element in the DOM, so you need to have the input before the label.
2 - Your label isn't assigned to the input
To assign the label, use the for attribute, and give the input an ID:
<div class="form-group">
<input type="radio" id="custom" />
<label for="custom">Label</label>
</div>
3 - The content for the pseudo element is missing quotes.
4 - You aren't applying the styles to the after element of the label, you were applying them to the label directly:
input[type=radio]:checked + label{
content: \2022;
color: red;
font-size: 30px;
text-align: center;
line-height: 18px;
}
Selects the label, while:
input[type=radio]:checked + label:after{
content: "\2022";
color: red;
font-size: 30px;
text-align: center;
line-height: 18px;
}
Selects the after element
Updated, working JSFiddle
Updated fiddle where I've added id for the radio and label needs
for="radioId"
to be able to work like that
also the label needs to be after the radio button
In bootstrap we can prepend an input using the following code:
<div class="input-prepend">
<span class="add-on">#</span>
<input type="text">
</div>
I want to achieve exactly the same thing in jQuery Mobile, but without using bootstrap.
I can see that the relevant CSS code from bootstrap is as follows:
.input-prepend {
display: inline-block;
font-size: 0;
margin-bottom: 10px;
vertical-align: middle;
white-space: nowrap;
}
.input-prepend .add-on {
background-color: #EEEEEE;
border: 1px solid #CCCCCC;
display: inline-block;
font-size: 14px;
font-weight: normal;
height: 20px;
line-height: 20px;
min-width: 16px;
padding: 4px 5px;
text-align: center;
text-shadow: 0 1px 0 #FFFFFF;
width: auto;
}
After adding these to my custom CSS, I still couldn't figure out what's missing. But certainly something is missing.
Can someone please guide me.
Here is the example fiddle: http://jsfiddle.net/LittleLebowski/Mgq9W/
Leave the rest of the css the same, but add this to .input-prepend .add-on rule. You could also use vertical-align:top. I tested it using your fiddle link.
.input-prepend .add-on {
vertical-align: bottom;
}
You could also try adding..
.input-prepend input {
position: relative;
margin-bottom: 0;
vertical-align: top;
}
I am having trouble properly formatting CSS to display in IE the way I want it. It shows up in Firefox perfectly. I am trying to have it display the label and then next to it have the input or select box that is aligned and all the same size so it looks even. I know there are hacks for IE but none seem to be making a change. Example CSS and html code that I have and works in firefox is below. Any help would be great Thanks!
*CSS
fieldset {
border: none;
padding: 10px;
width: 600px;
margin-top: 5px;
}
label {
width: 140px;
padding-left: 20px;
margin: 5px;
float: left;
text-align: left;
}
input {
margin: 5px;
padding 0px;
float: left;
vertical-align: middle;
display: inline;
}
select {
margin: 1px 0px;
padding: 2px;
float: left;
display: inline;
width: 149px;
}
br {
clear: left;
}
*HTML
<fieldset>
<label>First Name:</lable>
<input type="text" value="first_name" /><br >
<label>Last Name:</lable>
<input type="text" value="last_name" /><br >
<label>User Role:</lable>
<select>
<option value=""></option>
<option value="admin">Admin</option>
<option value="basic">Basic</option>
</select>
</fieldset>
Fix your label tags and then try this css code:
fieldset {
border: none;
padding: 10px;
width: 600px;
margin-top: 5px;
}
label {
width: 140px;
margin: 5px;
display: block;
float: left;
}
input, select {
width: 150px;
margin: 5px;
float: left;
display: block;
}
br {
clear: both;
}
It works for me in IE, FF, Chrome, and Safari. Also, you might want to try using ordered lists to style your form elements.