Add html icon in button value
up vote
0
down vote
favorite
<input type="submit" id="appCreate" name="Reds" value="Reds" formaction=@Url.Action("") formmethod="post" class="btn btn-success btn-block" onclick="javascript: return SubmitForm(this);" />
CSS -
.reddot {
content: "25cf";
font-size: 1.5em;
color: red;
}
I want to add <span class="reddot"></span> to the value of my button (it just creates a red dot icon). So the value of my button shown is Reds<red dot icon>
How can I do this?
html
asked Nov 9 at 16:20
test acc
1088
add a comment |
up vote
0
down vote
favorite
<input type="submit" id="appCreate" name="Reds" value="Reds" formaction=@Url.Action("") formmethod="post" class="btn btn-success btn-block" onclick="javascript: return SubmitForm(this);" />
CSS -
.reddot {
content: "25cf";
font-size: 1.5em;
color: red;
}
I want to add <span class="reddot"></span> to the value of my button (it just creates a red dot icon). So the value of my button shown is Reds<red dot icon>
How can I do this?
html
asked Nov 9 at 16:20
test acc
1088
@TylerRoper Right, but what would the work around be? Is it impossible to show a reddot inside a button?
– test acc
Nov 9 at 16:23
Sorry, deleted my comment. You're trying to have a red dot at the end of the button text? Or is the red dot always in the same place on the button, regardless of its text?
– Tyler Roper
Nov 9 at 16:24
Well preferably a right aligned reddot, while the text is left aligned. But I would also be fine with the reddot just being after the text. @TylerRoper
– test acc
Nov 9 at 16:25
The red dot being right-aligned is much easier than the latter. I'll submit an answer.
– Tyler Roper
Nov 9 at 16:26
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
<input type="submit" id="appCreate" name="Reds" value="Reds" formaction=@Url.Action("") formmethod="post" class="btn btn-success btn-block" onclick="javascript: return SubmitForm(this);" />
CSS -
.reddot {
content: "25cf";
font-size: 1.5em;
color: red;
}
I want to add <span class="reddot"></span> to the value of my button (it just creates a red dot icon). So the value of my button shown is Reds<red dot icon>
How can I do this?
html
asked Nov 9 at 16:20
test acc
1088
<input type="submit" id="appCreate" name="Reds" value="Reds" formaction=@Url.Action("") formmethod="post" class="btn btn-success btn-block" onclick="javascript: return SubmitForm(this);" />
CSS -
.reddot {
content: "25cf";
font-size: 1.5em;
color: red;
}
I want to add <span class="reddot"></span> to the value of my button (it just creates a red dot icon). So the value of my button shown is Reds<red dot icon>
How can I do this?
html
html
asked Nov 9 at 16:20
test acc
1088
asked Nov 9 at 16:20
test acc
1088
asked Nov 9 at 16:20
test acc
1088
asked Nov 9 at 16:20
test acc
1088
asked Nov 9 at 16:20
test acc
1088
1088
@TylerRoper Right, but what would the work around be? Is it impossible to show a reddot inside a button?
– test acc
Nov 9 at 16:23
Sorry, deleted my comment. You're trying to have a red dot at the end of the button text? Or is the red dot always in the same place on the button, regardless of its text?
– Tyler Roper
Nov 9 at 16:24
Well preferably a right aligned reddot, while the text is left aligned. But I would also be fine with the reddot just being after the text. @TylerRoper
– test acc
Nov 9 at 16:25
The red dot being right-aligned is much easier than the latter. I'll submit an answer.
– Tyler Roper
Nov 9 at 16:26
add a comment |
@TylerRoper Right, but what would the work around be? Is it impossible to show a reddot inside a button?
– test acc
Nov 9 at 16:23
Sorry, deleted my comment. You're trying to have a red dot at the end of the button text? Or is the red dot always in the same place on the button, regardless of its text?
– Tyler Roper
Nov 9 at 16:24
Well preferably a right aligned reddot, while the text is left aligned. But I would also be fine with the reddot just being after the text. @TylerRoper
– test acc
Nov 9 at 16:25
The red dot being right-aligned is much easier than the latter. I'll submit an answer.
– Tyler Roper
Nov 9 at 16:26
@TylerRoper Right, but what would the work around be? Is it impossible to show a reddot inside a button?
– test acc
Nov 9 at 16:23
@TylerRoper Right, but what would the work around be? Is it impossible to show a reddot inside a button?
– test acc
Nov 9 at 16:23
Sorry, deleted my comment. You're trying to have a red dot at the end of the button text? Or is the red dot always in the same place on the button, regardless of its text?
– Tyler Roper
Nov 9 at 16:24
Sorry, deleted my comment. You're trying to have a red dot at the end of the button text? Or is the red dot always in the same place on the button, regardless of its text?
– Tyler Roper
Nov 9 at 16:24
Well preferably a right aligned reddot, while the text is left aligned. But I would also be fine with the reddot just being after the text. @TylerRoper
– test acc
Nov 9 at 16:25
Well preferably a right aligned reddot, while the text is left aligned. But I would also be fine with the reddot just being after the text. @TylerRoper
– test acc
Nov 9 at 16:25
The red dot being right-aligned is much easier than the latter. I'll submit an answer.
– Tyler Roper
Nov 9 at 16:26
The red dot being right-aligned is much easier than the latter. I'll submit an answer.
– Tyler Roper
Nov 9 at 16:26
add a comment |
2 Answers
2
active
oldest
votes
up vote
0
down vote
Instead of content: "25cf"; Try background: url('xyz.png');
answered Nov 9 at 16:29
Aravind Bhat K
244213
add a comment |
up vote
0
down vote
<input> elements are considered void elements, therefore they cannot contain children. You could use a <button> element, but personally I'd discourage this method because the HTML spec deems it invalid.
One possible solution is to wrap the button in a container. That container could have a pseudo-element (::after) that places the red dot for you.
.reddot {
display: inline-block;
position: relative;
}
.reddot > input[type=submit] {
text-align: left;
padding-right: 20px; /* Add padding to make space for the dot */
}
.reddot::after { /* Place an element inside of .reddot */
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%); /* Center it vertically */
right: 5px; /* 5px off the right edge */
content: "25cf";
font-size: 1.5em;
color: red;
pointer-events: none; /* Make sure the dot doesn't block the button */
}<div class="reddot">
<input type="submit" />
</div>
<div class="reddot">
<input type="submit" value="Here's another button with a red dot!" />
</div>answered Nov 9 at 16:33
Tyler Roper
12.1k11641
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
Instead of content: "25cf"; Try background: url('xyz.png');
answered Nov 9 at 16:29
Aravind Bhat K
244213
add a comment |
up vote
0
down vote
Instead of content: "25cf"; Try background: url('xyz.png');
answered Nov 9 at 16:29
Aravind Bhat K
244213
add a comment |
up vote
0
down vote
up vote
0
down vote
Instead of content: "25cf"; Try background: url('xyz.png');
answered Nov 9 at 16:29
Aravind Bhat K
244213
Instead of content: "25cf"; Try background: url('xyz.png');
answered Nov 9 at 16:29
Aravind Bhat K
244213
answered Nov 9 at 16:29
Aravind Bhat K
244213
answered Nov 9 at 16:29
Aravind Bhat K
244213
answered Nov 9 at 16:29
Aravind Bhat K
244213
244213
add a comment |
add a comment |
up vote
0
down vote
<input> elements are considered void elements, therefore they cannot contain children. You could use a <button> element, but personally I'd discourage this method because the HTML spec deems it invalid.
One possible solution is to wrap the button in a container. That container could have a pseudo-element (::after) that places the red dot for you.
.reddot {
display: inline-block;
position: relative;
}
.reddot > input[type=submit] {
text-align: left;
padding-right: 20px; /* Add padding to make space for the dot */
}
.reddot::after { /* Place an element inside of .reddot */
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%); /* Center it vertically */
right: 5px; /* 5px off the right edge */
content: "25cf";
font-size: 1.5em;
color: red;
pointer-events: none; /* Make sure the dot doesn't block the button */
}<div class="reddot">
<input type="submit" />
</div>
<div class="reddot">
<input type="submit" value="Here's another button with a red dot!" />
</div>answered Nov 9 at 16:33
Tyler Roper
12.1k11641
add a comment |
up vote
0
down vote
<input> elements are considered void elements, therefore they cannot contain children. You could use a <button> element, but personally I'd discourage this method because the HTML spec deems it invalid.
One possible solution is to wrap the button in a container. That container could have a pseudo-element (::after) that places the red dot for you.
.reddot {
display: inline-block;
position: relative;
}
.reddot > input[type=submit] {
text-align: left;
padding-right: 20px; /* Add padding to make space for the dot */
}
.reddot::after { /* Place an element inside of .reddot */
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%); /* Center it vertically */
right: 5px; /* 5px off the right edge */
content: "25cf";
font-size: 1.5em;
color: red;
pointer-events: none; /* Make sure the dot doesn't block the button */
}<div class="reddot">
<input type="submit" />
</div>
<div class="reddot">
<input type="submit" value="Here's another button with a red dot!" />
</div>answered Nov 9 at 16:33
Tyler Roper
12.1k11641
add a comment |
up vote
0
down vote
up vote
0
down vote
<input> elements are considered void elements, therefore they cannot contain children. You could use a <button> element, but personally I'd discourage this method because the HTML spec deems it invalid.
One possible solution is to wrap the button in a container. That container could have a pseudo-element (::after) that places the red dot for you.
.reddot {
display: inline-block;
position: relative;
}
.reddot > input[type=submit] {
text-align: left;
padding-right: 20px; /* Add padding to make space for the dot */
}
.reddot::after { /* Place an element inside of .reddot */
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%); /* Center it vertically */
right: 5px; /* 5px off the right edge */
content: "25cf";
font-size: 1.5em;
color: red;
pointer-events: none; /* Make sure the dot doesn't block the button */
}<div class="reddot">
<input type="submit" />
</div>
<div class="reddot">
<input type="submit" value="Here's another button with a red dot!" />
</div>answered Nov 9 at 16:33
Tyler Roper
12.1k11641
<input> elements are considered void elements, therefore they cannot contain children. You could use a <button> element, but personally I'd discourage this method because the HTML spec deems it invalid.
One possible solution is to wrap the button in a container. That container could have a pseudo-element (::after) that places the red dot for you.
.reddot {
display: inline-block;
position: relative;
}
.reddot > input[type=submit] {
text-align: left;
padding-right: 20px; /* Add padding to make space for the dot */
}
.reddot::after { /* Place an element inside of .reddot */
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%); /* Center it vertically */
right: 5px; /* 5px off the right edge */
content: "25cf";
font-size: 1.5em;
color: red;
pointer-events: none; /* Make sure the dot doesn't block the button */
}<div class="reddot">
<input type="submit" />
</div>
<div class="reddot">
<input type="submit" value="Here's another button with a red dot!" />
</div>.reddot {
display: inline-block;
position: relative;
}
.reddot > input[type=submit] {
text-align: left;
padding-right: 20px; /* Add padding to make space for the dot */
}
.reddot::after { /* Place an element inside of .reddot */
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%); /* Center it vertically */
right: 5px; /* 5px off the right edge */
content: "25cf";
font-size: 1.5em;
color: red;
pointer-events: none; /* Make sure the dot doesn't block the button */
}<div class="reddot">
<input type="submit" />
</div>
<div class="reddot">
<input type="submit" value="Here's another button with a red dot!" />
</div>.reddot {
display: inline-block;
position: relative;
}
.reddot > input[type=submit] {
text-align: left;
padding-right: 20px; /* Add padding to make space for the dot */
}
.reddot::after { /* Place an element inside of .reddot */
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%); /* Center it vertically */
right: 5px; /* 5px off the right edge */
content: "25cf";
font-size: 1.5em;
color: red;
pointer-events: none; /* Make sure the dot doesn't block the button */
}<div class="reddot">
<input type="submit" />
</div>
<div class="reddot">
<input type="submit" value="Here's another button with a red dot!" />
</div>answered Nov 9 at 16:33
Tyler Roper
12.1k11641
edited Nov 9 at 16:39
answered Nov 9 at 16:33
Tyler Roper
12.1k11641
answered Nov 9 at 16:33
Tyler Roper
12.1k11641
answered Nov 9 at 16:33
Tyler Roper
12.1k11641
12.1k11641
add a comment |
add a comment |
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%2f53229518%2fadd-html-icon-in-button-value%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
@TylerRoper Right, but what would the work around be? Is it impossible to show a reddot inside a button?
– test acc
Nov 9 at 16:23
Sorry, deleted my comment. You're trying to have a red dot at the end of the button text? Or is the red dot always in the same place on the button, regardless of its text?
– Tyler Roper
Nov 9 at 16:24
Well preferably a right aligned reddot, while the text is left aligned. But I would also be fine with the reddot just being after the text. @TylerRoper
– test acc
Nov 9 at 16:25
The red dot being right-aligned is much easier than the latter. I'll submit an answer.
– Tyler Roper
Nov 9 at 16:26