luci-base: view: make checkboxes and radio buttons styleable

Add an empty, normally invisible label after checkboxes and radio buttons
with cbi-input-{checkbox,radio} classes to allow CSS styling them as
suggested on http://www.paulund.co.uk/style-checkboxes-with-css

Signed-off-by: Nils Schneider <nils@nilsschneider.net>
Signed-off-by: Matthias Schiffer <mschiffer@universe-factory.net>

9 files changed, 26 insertions, 4 deletions

diff --git a/applications/luci-app-ddns/luasrc/view/ddns/detail_lvalue.htm b/applications/luci-app-ddns/luasrc/view/ddns/detail_lvalue.htm
index 0bcfd44283..b69d780ea9 100644
--- a/applications/luci-app-ddns/luasrc/view/ddns/detail_lvalue.htm
+++ b/applications/luci-app-ddns/luasrc/view/ddns/detail_lvalue.htm
@@ -14,6 +14,7 @@
 	c = c + 1
 %>
 	<input class="cbi-input-radio" onclick="cbi_d_update(this.id)" onchange="cbi_d_update(this.id)" type="radio"<%= attr("id", cbid..c) .. attr("name", cbid) .. attr("value", key) .. ifattr((self:cfgvalue(section) or self.default) == key, "checked", "checked") %> />
+	<label<%= attr("for", cbid..c) %>></label>
 	<label<%= attr("for", cbid..c) %>><%=self.vallist[i]%></label>
 <% if c == self.size then c = 0 %><% if self.orientation == "horizontal" then %>&#160;<% else %><br /><% end %>
 <% end end %>
diff --git a/applications/luci-app-ddns/luasrc/view/ddns/overview_enabled.htm b/applications/luci-app-ddns/luasrc/view/ddns/overview_enabled.htm
index 64b3dae455..2efc125fcc 100644
--- a/applications/luci-app-ddns/luasrc/view/ddns/overview_enabled.htm
+++ b/applications/luci-app-ddns/luasrc/view/ddns/overview_enabled.htm
@@ -10,6 +10,7 @@
 	attr("id", cbid) .. attr("name", cbid) .. attr("value", self.enabled or 1) ..
 	ifattr((self:cfgvalue(section) or self.default) == self.enabled, "checked", "checked")
 %> />
+<label<%= attr("for", cbid)%>></label>
 
 <%+cbi/valuefooter%>
 <!-- ++ END ++ Dynamic DNS ++ overview_enabled.htm ++ -->
diff --git a/modules/luci-base/luasrc/view/cbi/firewall_zonelist.htm b/modules/luci-base/luasrc/view/cbi/firewall_zonelist.htm
index b3b454008f..5cb31511f6 100644
--- a/modules/luci-base/luasrc/view/cbi/firewall_zonelist.htm
+++ b/modules/luci-base/luasrc/view/cbi/firewall_zonelist.htm
@@ -28,6 +28,7 @@
 	<% if self.allowlocal then %>
 	<li style="padding:0.5em">
 		<input class="cbi-input-radio" data-update="click change"<%=attr("type", self.widget or "radio") .. attr("id", cbid .. "_empty") .. attr("name", cbid) .. attr("value", "") .. ifattr(checked[""], "checked", "checked")%> /> &#160;
+		<label<%=attr("for", cbid .. "_empty")%>></label>
 		<label<%=attr("for", cbid .. "_empty")%> style="background-color:<%=fwm.zone.get_color()%>" class="zonebadge">
 			<strong><%:Device%></strong>
 			<% if self.allowany and self.allowlocal then %>(<%:input%>)<% end %>
@@ -37,6 +38,7 @@
 	<% if self.allowany then %>
 	<li style="padding:0.5em">
 		<input class="cbi-input-radio" data-update="click change"<%=attr("type", self.widget or "radio") .. attr("id", cbid .. "_any") .. attr("name", cbid) .. attr("value", "*") .. ifattr(checked["*"], "checked", "checked")%> /> &#160;
+		<label<%=attr("for", cbid .. "_any")%>></label>
 		<label<%=attr("for", cbid .. "_any")%> style="background-color:<%=fwm.zone.get_color()%>" class="zonebadge">
 			<strong><%:Any zone%></strong>
 			<% if self.allowany and self.allowlocal then %>(<%:forward%>)<% end %>
@@ -50,6 +52,7 @@
  	%>
 	<li style="padding:0.5em">
 		<input class="cbi-input-radio" data-update="click change"<%=attr("type", self.widget or "radio") .. attr("id", cbid .. "." .. zone:name()) .. attr("name", cbid) .. attr("value", zone:name()) .. ifattr(checked[zone:name()], "checked", "checked")%> /> &#160;
+		<label<%=attr("for", cbid .. "." .. zone:name())%>></label>
 		<label<%=attr("for", cbid .. "." .. zone:name())%> style="background-color:<%=zone:get_color()%>" class="zonebadge">
 			<strong><%=zone:name()%>:</strong>
 			<%
@@ -78,6 +81,7 @@
 	<% if self.widget ~= "checkbox" and not self.nocreate then %>
 	<li style="padding:0.5em">
 		<input class="cbi-input-radio" data-update="click change" type="radio"<%=attr("id", cbid .. "_new") .. attr("name", cbid) .. attr("value", "-") .. ifattr(not selected, "checked", "checked")%> /> &#160;
+		<label<%=attr("for", cbid .. "_new")%>></label>
 		<div onclick="document.getElementById('<%=cbid%>_new').checked=true" class="zonebadge" style="background-color:<%=fwm.zone.get_color()%>">
 			<em><%:unspecified -or- create:%>&#160;</em>
 			<input type="text"<%=attr("name", cbid .. ".newzone") .. ifattr(not selected, "value", luci.http.formvalue(cbid .. ".newzone") or self.default)%> onfocus="document.getElementById('<%=cbid%>_new').checked=true" />
diff --git a/modules/luci-base/luasrc/view/cbi/fvalue.htm b/modules/luci-base/luasrc/view/cbi/fvalue.htm
index 5eddcf22a1..197d03cf31 100644
--- a/modules/luci-base/luasrc/view/cbi/fvalue.htm
+++ b/modules/luci-base/luasrc/view/cbi/fvalue.htm
@@ -6,4 +6,5 @@
 		attr("id", cbid) .. attr("name", cbid) .. attr("value", self.enabled or 1) ..
 		ifattr((self:cfgvalue(section) or self.default) == self.enabled, "checked", "checked")
 	%> />
+	<label<%= attr("for", cbid)%>></label>
 <%+cbi/valuefooter%>
diff --git a/modules/luci-base/luasrc/view/cbi/lvalue.htm b/modules/luci-base/luasrc/view/cbi/lvalue.htm
index 99f456dc54..34d02eeca0 100644
--- a/modules/luci-base/luasrc/view/cbi/lvalue.htm
+++ b/modules/luci-base/luasrc/view/cbi/lvalue.htm
@@ -24,15 +24,16 @@
 	<div>
 		<% for i, key in pairs(self.keylist) do %>
 			<label<%=
-				attr("id", cbid.."-"..key) ..
 				attr("data-index", i) ..
 				attr("data-depends", self:deplist2json(section, self.deplist[i]))
 			%>>
 				<input class="cbi-input-radio" data-update="click change" type="radio"<%=
+					attr("id", cbid.."-"..key) ..
 					attr("name", cbid) ..
 					attr("value", key) ..
 					ifattr((self:cfgvalue(section) or self.default) == key, "checked", "checked")
 				%> />
+				<label<%= attr("for", cbid.."-"..key)%>></label>
 				<%=pcdata(self.vallist[i])%>
 			</label>
 			<% if i == self.size then write(br) end %>
diff --git a/modules/luci-base/luasrc/view/cbi/mvalue.htm b/modules/luci-base/luasrc/view/cbi/mvalue.htm
index ca7b94c15e..246ef43aad 100644
--- a/modules/luci-base/luasrc/view/cbi/mvalue.htm
+++ b/modules/luci-base/luasrc/view/cbi/mvalue.htm
@@ -24,15 +24,16 @@
 	<div>
 		<% for i, key in pairs(self.keylist) do %>
 			<label<%=
-				attr("id", cbid.."-"..key) ..
 				attr("data-index", i) ..
 				attr("data-depends", self:deplist2json(section, self.deplist[i]))
 			%>>
 				<input class="cbi-input-checkbox" type="checkbox" data-update="click change"<%=
+					attr("id", cbid.."-"..key) ..
 					attr("name", cbid) ..
 					attr("value", key) ..
 					ifattr(luci.util.contains(v, key), "checked", "checked")
 				%> />
+				<label<%= attr("for", cbid.."-"..key)%>></label>
 				<%=pcdata(self.vallist[i])%>
 			</label>
 			<% if i == self.size then write('<br />') end %>
diff --git a/modules/luci-base/luasrc/view/cbi/network_ifacelist.htm b/modules/luci-base/luasrc/view/cbi/network_ifacelist.htm
index db6112992a..62dbde7dd4 100644
--- a/modules/luci-base/luasrc/view/cbi/network_ifacelist.htm
+++ b/modules/luci-base/luasrc/view/cbi/network_ifacelist.htm
@@ -46,7 +46,11 @@
 			attr("id", cbid .. "." .. iface:name()) ..
 			attr("name", cbid) .. attr("value", iface:name()) ..
 			ifattr(checked[iface:name()], "checked", "checked")
-		%> /> &#160;
+		%> />
+		<%- if not self.widget or self.widget == "checkbox" or self.widget == "radio" then -%>
+			<label<%=attr("for", cbid .. "." .. iface:name())%>></label>
+		<%- end -%>
+		&#160;
 		<label<%=attr("for", cbid .. "." .. iface:name())%>>
 			<% if link then -%><a href="<%=link%>"><% end -%>
 			<img<%=attr("title", iface:get_i18n())%> style="width:16px; height:16px; vertical-align:middle" src="<%=resource%>/icons/<%=iface:type()%><%=iface:is_up() and "" or "_disabled"%>.png" />
@@ -68,7 +72,11 @@
 			attr("id", cbid .. "_custom") ..
 			attr("name", cbid) ..
 			attr("value", " ")
-		%> /> &#160;
+		%> />
+		<%- if not self.widget or self.widget == "checkbox" or self.widget == "radio" then -%>
+			<label<%=attr("for", cbid .. "_custom")%>></label>
+		<%- end -%>
+		&#160;
 		<label<%=attr("for", cbid .. "_custom")%>>
 			<img title="<%:Custom Interface%>" style="width:16px; height:16px; vertical-align:middle" src="<%=resource%>/icons/ethernet_disabled.png" />
 			<%:Custom Interface%>:
diff --git a/modules/luci-base/luasrc/view/cbi/network_netlist.htm b/modules/luci-base/luasrc/view/cbi/network_netlist.htm
index f8a2b72f3c..8bf1a70a20 100644
--- a/modules/luci-base/luasrc/view/cbi/network_netlist.htm
+++ b/modules/luci-base/luasrc/view/cbi/network_netlist.htm
@@ -52,6 +52,9 @@
 	<% if not self.nocreate then %>
 	<li style="padding:0.25em 0">
 		<input class="cbi-input-<%=self.widget or "radio"%>" data-update="click change"<%=attr("type", self.widget or "radio") .. attr("id", cbid .. "_new") .. attr("name", cbid) .. attr("value", "-") .. ifattr(not value and self.widget ~= "checkbox", "checked", "checked")%> /> &#160;
+		<%- if not self.widget or self.widget == "checkbox" or self.widget == "radio" then -%>
+			<label<%=attr("for", cbid .. "_new")%>></label>
+		<%- end -%>
 		<div style="padding:0.5em; display:inline">
 			<label<%=attr("for", cbid .. "_new")%>><em>
 				<%- if self.widget == "checkbox" then -%>
diff --git a/modules/luci-mod-freifunk/luasrc/view/freifunk/remote_update.htm b/modules/luci-mod-freifunk/luasrc/view/freifunk/remote_update.htm
index 83e1ee5792..f087472d31 100644
--- a/modules/luci-mod-freifunk/luasrc/view/freifunk/remote_update.htm
+++ b/modules/luci-mod-freifunk/luasrc/view/freifunk/remote_update.htm
@@ -38,9 +38,11 @@
 		<input type="hidden" name="confirm" value="1" />
 
 		<input type="checkbox" class="cbi-input-checkbox" name="keepcfg" value="1" checked="checked" id="cb_keepcfg" />
+		<label for="cb_keepcfg"></label>
 		<label for="cb_keepcfg"><%:Keep configuration%></label><br />
 
 		<input type="checkbox" class="cbi-input-checkbox" name="verify" value="1" checked="checked" id="cb_verify" />
+		<label for="cb_verify"></label>
 		<label for="cb_verify"><%:Verify downloaded images%></label><br /><br />
 
 		<input type="submit" class="cbi-button cbi-button-apply" value="<%:Confirm Upgrade%>" />