how take margin-left in input check box
Suppose to have:
<div class="home">
<input type="checkbox"/>....
</div>
I need to insert margin-left:3px to checkbox. My css code is:
.home+input[type=checkbox]{
margin-left:3px;
}
Anyone can help me^
html css css3
asked Nov 20 at 16:43
Doflamingo19
1178
add a comment |
Suppose to have:
<div class="home">
<input type="checkbox"/>....
</div>
I need to insert margin-left:3px to checkbox. My css code is:
.home+input[type=checkbox]{
margin-left:3px;
}
Anyone can help me^
html css css3
asked Nov 20 at 16:43
Doflamingo19
1178
add a comment |
Suppose to have:
<div class="home">
<input type="checkbox"/>....
</div>
I need to insert margin-left:3px to checkbox. My css code is:
.home+input[type=checkbox]{
margin-left:3px;
}
Anyone can help me^
html css css3
asked Nov 20 at 16:43
Doflamingo19
1178
Suppose to have:
<div class="home">
<input type="checkbox"/>....
</div>
I need to insert margin-left:3px to checkbox. My css code is:
.home+input[type=checkbox]{
margin-left:3px;
}
Anyone can help me^
html css css3
html css css3
asked Nov 20 at 16:43
Doflamingo19
1178
asked Nov 20 at 16:43
Doflamingo19
1178
asked Nov 20 at 16:43
Doflamingo19
1178
asked Nov 20 at 16:43
Doflamingo19
1178
asked Nov 20 at 16:43
Doflamingo19
1178
1178
add a comment |
add a comment |
3 Answers
3
active
oldest
votes
.home input[type="checkbox"]{
margin-left:3px;
}<div class="home">
<input type="checkbox"/>....
</div>You don't need the plus really... unless you have a specific need, and you need quotes around checkbox..!
answered Nov 20 at 16:47
Dammeul
866716
1
you do not need quotes around attribute selectors. Unless you're using special characters, that's just a matter of taste.
– Alexander Rice
Nov 20 at 17:29
Ahh I did not know that! Always done it out of force of habit!
– Dammeul
Nov 21 at 14:02
add a comment |
You almost had it, you just need to wrap checkbox inside quotes input[type="checkbox"]
input[type="checkbox"]
{
margin-left:10px;
}<div class="home">
<input type="checkbox"/>
</div>answered Nov 20 at 16:46
Aaron McGuire
4328
add a comment |
Both of the other answers work, but neither of them is accurate.
Although I tend to recommend putting quotes around attribute selectors [type="checkbox"], it will work perfectly fine without quotes [type=checkbox]. Quotes are only necessary if you're including special characters.
The reason your code wasn't working was that the + in your selector matches siblings.
.home+input[type=checkbox]{} would match an input element with the type of checkbox that is placed immediately after an element with a class of home.
<div class="home">....</div>
<input type="checkbox"/>....
Since your input element is nested inside .home, you won't use the sibling selector +
That's why this code will do the trick:
.home input[type=checkbox]{
margin-left:3px;
}<div class="home">
<input type="checkbox"/>....
</div>answered Nov 20 at 17:27
Alexander Rice
813
I didn't know that! Will save me some time in the future!
– Dammeul
Nov 21 at 14:03
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53397650%2fhow-take-margin-left-in-input-check-box%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
.home input[type="checkbox"]{
margin-left:3px;
}<div class="home">
<input type="checkbox"/>....
</div>You don't need the plus really... unless you have a specific need, and you need quotes around checkbox..!
answered Nov 20 at 16:47
Dammeul
866716
1
you do not need quotes around attribute selectors. Unless you're using special characters, that's just a matter of taste.
– Alexander Rice
Nov 20 at 17:29
Ahh I did not know that! Always done it out of force of habit!
– Dammeul
Nov 21 at 14:02
add a comment |
.home input[type="checkbox"]{
margin-left:3px;
}<div class="home">
<input type="checkbox"/>....
</div>You don't need the plus really... unless you have a specific need, and you need quotes around checkbox..!
answered Nov 20 at 16:47
Dammeul
866716
1
you do not need quotes around attribute selectors. Unless you're using special characters, that's just a matter of taste.
– Alexander Rice
Nov 20 at 17:29
Ahh I did not know that! Always done it out of force of habit!
– Dammeul
Nov 21 at 14:02
add a comment |
.home input[type="checkbox"]{
margin-left:3px;
}<div class="home">
<input type="checkbox"/>....
</div>You don't need the plus really... unless you have a specific need, and you need quotes around checkbox..!
answered Nov 20 at 16:47
Dammeul
866716
.home input[type="checkbox"]{
margin-left:3px;
}<div class="home">
<input type="checkbox"/>....
</div>You don't need the plus really... unless you have a specific need, and you need quotes around checkbox..!
.home input[type="checkbox"]{
margin-left:3px;
}<div class="home">
<input type="checkbox"/>....
</div>.home input[type="checkbox"]{
margin-left:3px;
}<div class="home">
<input type="checkbox"/>....
</div>answered Nov 20 at 16:47
Dammeul
866716
answered Nov 20 at 16:47
Dammeul
866716
answered Nov 20 at 16:47
Dammeul
866716
answered Nov 20 at 16:47
Dammeul
866716
866716
1
you do not need quotes around attribute selectors. Unless you're using special characters, that's just a matter of taste.
– Alexander Rice
Nov 20 at 17:29
Ahh I did not know that! Always done it out of force of habit!
– Dammeul
Nov 21 at 14:02
add a comment |
1
you do not need quotes around attribute selectors. Unless you're using special characters, that's just a matter of taste.
– Alexander Rice
Nov 20 at 17:29
Ahh I did not know that! Always done it out of force of habit!
– Dammeul
Nov 21 at 14:02
1
1
you do not need quotes around attribute selectors. Unless you're using special characters, that's just a matter of taste.
– Alexander Rice
Nov 20 at 17:29
you do not need quotes around attribute selectors. Unless you're using special characters, that's just a matter of taste.
– Alexander Rice
Nov 20 at 17:29
Ahh I did not know that! Always done it out of force of habit!
– Dammeul
Nov 21 at 14:02
Ahh I did not know that! Always done it out of force of habit!
– Dammeul
Nov 21 at 14:02
add a comment |
You almost had it, you just need to wrap checkbox inside quotes input[type="checkbox"]
input[type="checkbox"]
{
margin-left:10px;
}<div class="home">
<input type="checkbox"/>
</div>answered Nov 20 at 16:46
Aaron McGuire
4328
add a comment |
You almost had it, you just need to wrap checkbox inside quotes input[type="checkbox"]
input[type="checkbox"]
{
margin-left:10px;
}<div class="home">
<input type="checkbox"/>
</div>answered Nov 20 at 16:46
Aaron McGuire
4328
add a comment |
You almost had it, you just need to wrap checkbox inside quotes input[type="checkbox"]
input[type="checkbox"]
{
margin-left:10px;
}<div class="home">
<input type="checkbox"/>
</div>answered Nov 20 at 16:46
Aaron McGuire
4328
You almost had it, you just need to wrap checkbox inside quotes input[type="checkbox"]
input[type="checkbox"]
{
margin-left:10px;
}<div class="home">
<input type="checkbox"/>
</div>input[type="checkbox"]
{
margin-left:10px;
}<div class="home">
<input type="checkbox"/>
</div>input[type="checkbox"]
{
margin-left:10px;
}<div class="home">
<input type="checkbox"/>
</div>answered Nov 20 at 16:46
Aaron McGuire
4328
answered Nov 20 at 16:46
Aaron McGuire
4328
answered Nov 20 at 16:46
Aaron McGuire
4328
answered Nov 20 at 16:46
Aaron McGuire
4328
4328
add a comment |
add a comment |
Both of the other answers work, but neither of them is accurate.
Although I tend to recommend putting quotes around attribute selectors [type="checkbox"], it will work perfectly fine without quotes [type=checkbox]. Quotes are only necessary if you're including special characters.
The reason your code wasn't working was that the + in your selector matches siblings.
.home+input[type=checkbox]{} would match an input element with the type of checkbox that is placed immediately after an element with a class of home.
<div class="home">....</div>
<input type="checkbox"/>....
Since your input element is nested inside .home, you won't use the sibling selector +
That's why this code will do the trick:
.home input[type=checkbox]{
margin-left:3px;
}<div class="home">
<input type="checkbox"/>....
</div>answered Nov 20 at 17:27
Alexander Rice
813
I didn't know that! Will save me some time in the future!
– Dammeul
Nov 21 at 14:03
add a comment |
Both of the other answers work, but neither of them is accurate.
Although I tend to recommend putting quotes around attribute selectors [type="checkbox"], it will work perfectly fine without quotes [type=checkbox]. Quotes are only necessary if you're including special characters.
The reason your code wasn't working was that the + in your selector matches siblings.
.home+input[type=checkbox]{} would match an input element with the type of checkbox that is placed immediately after an element with a class of home.
<div class="home">....</div>
<input type="checkbox"/>....
Since your input element is nested inside .home, you won't use the sibling selector +
That's why this code will do the trick:
.home input[type=checkbox]{
margin-left:3px;
}<div class="home">
<input type="checkbox"/>....
</div>answered Nov 20 at 17:27
Alexander Rice
813
I didn't know that! Will save me some time in the future!
– Dammeul
Nov 21 at 14:03
add a comment |
Both of the other answers work, but neither of them is accurate.
Although I tend to recommend putting quotes around attribute selectors [type="checkbox"], it will work perfectly fine without quotes [type=checkbox]. Quotes are only necessary if you're including special characters.
The reason your code wasn't working was that the + in your selector matches siblings.
.home+input[type=checkbox]{} would match an input element with the type of checkbox that is placed immediately after an element with a class of home.
<div class="home">....</div>
<input type="checkbox"/>....
Since your input element is nested inside .home, you won't use the sibling selector +
That's why this code will do the trick:
.home input[type=checkbox]{
margin-left:3px;
}<div class="home">
<input type="checkbox"/>....
</div>answered Nov 20 at 17:27
Alexander Rice
813
Both of the other answers work, but neither of them is accurate.
Although I tend to recommend putting quotes around attribute selectors [type="checkbox"], it will work perfectly fine without quotes [type=checkbox]. Quotes are only necessary if you're including special characters.
The reason your code wasn't working was that the + in your selector matches siblings.
.home+input[type=checkbox]{} would match an input element with the type of checkbox that is placed immediately after an element with a class of home.
<div class="home">....</div>
<input type="checkbox"/>....
Since your input element is nested inside .home, you won't use the sibling selector +
That's why this code will do the trick:
.home input[type=checkbox]{
margin-left:3px;
}<div class="home">
<input type="checkbox"/>....
</div>.home input[type=checkbox]{
margin-left:3px;
}<div class="home">
<input type="checkbox"/>....
</div>.home input[type=checkbox]{
margin-left:3px;
}<div class="home">
<input type="checkbox"/>....
</div>answered Nov 20 at 17:27
Alexander Rice
813
answered Nov 20 at 17:27
Alexander Rice
813
answered Nov 20 at 17:27
Alexander Rice
813
answered Nov 20 at 17:27
Alexander Rice
813
813
I didn't know that! Will save me some time in the future!
– Dammeul
Nov 21 at 14:03
add a comment |
I didn't know that! Will save me some time in the future!
– Dammeul
Nov 21 at 14:03
I didn't know that! Will save me some time in the future!
– Dammeul
Nov 21 at 14:03
I didn't know that! Will save me some time in the future!
– Dammeul
Nov 21 at 14:03
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53397650%2fhow-take-margin-left-in-input-check-box%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
