View previous topic :: View next topic |
Author |
Message |
axelf Smarty Rookie
Joined: 26 Jan 2012 Posts: 10
|
Posted: Sat Oct 03, 2015 8:48 am Post subject: change the output of html_checkboxes |
|
|
Hello,
is it possible to change the output of html_checkboxes?
Instead of this
Code: | <label><input type="checkbox">Text</label> |
i want this
Code: | <label><input type="checkbox"><span>Text</span></label> |
|
|
Back to top |
|
AnrDaemon Administrator
Joined: 03 Dec 2012 Posts: 1785
|
Posted: Sat Oct 03, 2015 3:01 pm Post subject: |
|
|
What for, exactly? I see no good reason to do that. |
|
Back to top |
|
axelf Smarty Rookie
Joined: 26 Jan 2012 Posts: 10
|
Posted: Sat Oct 03, 2015 3:07 pm Post subject: |
|
|
I want to style the checkbox with css and need the span-tag for that. I can't use the label tag, because with css i can't style a parent element.
input:checked + span works for styling but it is not possible to style the label-tag by clicking on the checkbox. (without javascript) |
|
Back to top |
|
AnrDaemon Administrator
Joined: 03 Dec 2012 Posts: 1785
|
Posted: Sat Oct 03, 2015 3:09 pm Post subject: |
|
|
No, you don't need span tag for that.
Learn CSS, it lets you do everything you want without the use of useless markup.
group.class label { style; } |
|
Back to top |
|
axelf Smarty Rookie
Joined: 26 Jan 2012 Posts: 10
|
Posted: Sat Oct 03, 2015 3:19 pm Post subject: |
|
|
ok, could you give me an example?
How can i style the label-tag, if i click on the checkbox? In the label-tag i want to change some css (the checkmark is visible), if the checkbox is checked. if the checkbox will be unchecked, the checkmark is hidden.
Either you don't know what i mean or you also should learn CSS. In my case the span-Tag is no useless markup. |
|
Back to top |
|
AnrDaemon Administrator
Joined: 03 Dec 2012 Posts: 1785
|
Posted: Sat Oct 03, 2015 10:01 pm Post subject: |
|
|
axelf wrote: | ok, could you give me an example?
How can i style the label-tag, if i click on the checkbox? |
Same way you would style a <span> tag - attach jQuery event listener and do any client-side changes you wish.
Quote: | In the label-tag i want to change some css (the checkmark is visible), if the checkbox is checked. if the checkbox will be unchecked, the checkmark is hidden. |
So, go ahead and do it. What's the culprit?
I could probably do it with pure CSS. Not sure about browser compatibility, but it may work for most.
Quote: | Either you don't know what i mean or you also should learn CSS. In my case the span-Tag is no useless markup. |
In either case, you won't need any parasitic markup for such a simple task. |
|
Back to top |
|
axelf Smarty Rookie
Joined: 26 Jan 2012 Posts: 10
|
Posted: Sun Oct 04, 2015 8:08 am Post subject: |
|
|
AnrDaemon wrote: |
Same way you would style a <span> tag - attach jQuery event listener and do any client-side changes you wish.
|
In my second post i wrote without javascript.
AnrDaemon wrote: |
I could probably do it with pure CSS. Not sure about browser compatibility, but it may work for most.
|
it may work for the most? Not in Firefox or IE
AnrDaemon wrote: |
In either case, you won't need any parasitic markup for such a simple task. |
You think it is better to add Javascript for such a simple task as adding a simple span-tag. I think no.
btw... this was not my question |
|
Back to top |
|
AnrDaemon Administrator
Joined: 03 Dec 2012 Posts: 1785
|
Posted: Sun Oct 04, 2015 3:17 pm Post subject: |
|
|
axelf wrote: | In my second post i wrote without javascript. |
You didn't present any code, so no. |
|
Back to top |
|
axelf Smarty Rookie
Joined: 26 Jan 2012 Posts: 10
|
Posted: Sun Oct 04, 2015 3:37 pm Post subject: |
|
|
Sorry, but your answers are not very helpful for me. |
|
Back to top |
|
AnrDaemon Administrator
Joined: 03 Dec 2012 Posts: 1785
|
Posted: Sun Oct 04, 2015 5:55 pm Post subject: |
|
|
Your questions aren't any more helpful. Show us, how you are going to use CSS in your case, and we'll see if you really need what you are looking for. |
|
Back to top |
|
axelf Smarty Rookie
Joined: 26 Jan 2012 Posts: 10
|
Posted: Sun Oct 04, 2015 6:33 pm Post subject: |
|
|
The content hast to be changed on click.
This is the reason, why i want to change the output.
I need the span-tag in order to get the following css working. I cant use the label, because it is a parent element
Code: |
input[type='checkbox'] + span:before {
content: '';
}
input[type='checkbox']:checked + span:before {
content: 'x'
}
|
|
|
Back to top |
|
AnrDaemon Administrator
Joined: 03 Dec 2012 Posts: 1785
|
Posted: Sun Oct 04, 2015 8:26 pm Post subject: |
|
|
Sorry, but that doesn't make much sense. Unless you want to completely replace checkbox with text.
In which case, just do exactly that!
Code: | <html>
<head>
<title>Checkbox test.</title>
<style type="text/css"><!--
.checkboxlist label>input[type="checkbox"] {
content: '[ ]';
}
.checkboxlist label>input[type="checkbox"]:checked {
content: '[x]';
}
//--></style>
</head>
<body>
<optgroup class="checkboxlist">
<label><input type="checkbox" name="n1"/>n1</label><br/>
<label><input type="checkbox" name="n2"/>n2</label><br/>
<label><input type="checkbox" name="n3"/>n3</label><br/>
<label><input type="checkbox" name="n4"/>n4</label><br/>
<label><input type="checkbox" name="n5"/>n5</label><br/>
</optgroup>
</body>
</html> |
|
|
Back to top |
|
AnrDaemon Administrator
Joined: 03 Dec 2012 Posts: 1785
|
Posted: Sun Oct 04, 2015 8:41 pm Post subject: |
|
|
And if that isn't what you need, I suggest re-reading the help page - especially the "escape" parameter. |
|
Back to top |
|
axelf Smarty Rookie
Joined: 26 Jan 2012 Posts: 10
|
Posted: Sun Oct 04, 2015 8:50 pm Post subject: |
|
|
I want to completely replace the checkbox with custom css. Sorry, i forgot in my CSS the following:
Code: |
input[type='checkbox'] {
display: none;
}
|
In order to get it to work, i need this additional span-tag. Yor example will not work (wrong markup and css has no effect)
I only want to know whats the best way (or smarty way) to modify the output of the smarty-function |
|
Back to top |
|
AnrDaemon Administrator
Joined: 03 Dec 2012 Posts: 1785
|
Posted: Mon Oct 05, 2015 6:30 am Post subject: |
|
|
axelf wrote: | Yor example will not work (wrong markup and css has no effect) |
I wouldn't have suggested it without testing. Not my fault that modern browsers have interesting ideas about standard compliance.
Quote: | I only want to know whats the best way (or smarty way) to modify the output of the smarty-function |
Read my previous reply. |
|
Back to top |
|
|