![\"custom-radio\"](\"https:\/\/www.ktrick.com\/wp-content\/uploads\/2015\/08\/custom-radio.png\")
<\/p>\n<\/p>\n
If you want to change the radio button or checkbox design by css, usually you need to prepare the HTML source code like below:<\/p>\n[code lang=”html” highlight=””]\n<p>
\n <input type="radio" id="radio">
\n <label for="radio">\u30e9\u30b8\u30aa\u30dc\u30bf\u30f3<\/label>
\n<\/p>
\n[\/code]\n
The most important point in above HTML is having the “input” and “label” tag as sibling hierarchy. Based on this html, CSS should be specified as following:<\/p>\n[code lang=”css” highlight=””]\ninput[type="radio"]{
\n opacity: 0;
\n}
\n[\/code]\n
First of all, hiding the original radio design by setting opacity 0.
\nIn the next step, you can design the button as you like by using label tag like below.<\/p>\n[code lang=”css” highlight=””]\ninput[type="radio"]+label:before{
\n display: inline-block;
\n content: "";
\n background-color: lightpink;
\n color: crimson;
\n border-style: solid;
\n border-width: 0.1875em;
\n width: 0.625em;
\n height: 0.625em;
\n margin-top: 0.25em;
\n margin-right: 0.25em;
\n border-radius: 0.5em;
\n}
\ninput[type="radio"]:checked+label:before{
\n border-style: double;
\n border-width: 0.5em;
\n width: 0;
\n height: 0;
\n}
\n[\/code]\n
The css above is the one example of customizing the radio button. The HTML and CSS would be like the image below:<\/p>\n
<\/p>\n
The imporatnt point of this CSS is the selector of \u201dinput[type=”radio”]+label:before\u201d.
\nThe “+label” means to specify the label tag which is sibling of selected input tag (type is radio). By doing this, customizing the design of selected button.
\nYou might wonder why you need to use label tag instead of using input tag directly. The reason why doing this is because input tag cannot use “:before” and input tag itself needs to be hidden. Therefore label tag is needed to customize the design for radio butto\/checkbox.<\/p>\n
Actually the explanation above is nothing related with XPages. So you will be able to find many design example if you google for the radio button design.
\nNow I would like to write the article for how to change the XPages radio button design by using only CSS.<\/p>\n
To apply the similar design to the XPages radio button, first of all, we need to understand the HTML source code which XPages generates for radio button or radio button group control.
\nBelow example is for radio button group control.<\/p>\n[code lang=”xml” highlight=””]\n\t<xp:radioGroup id="radioGroup1">
\n\t\t<xp:selectItem itemLabel="Radio A" itemValue="A"><\/xp:selectItem>
\n\t\t<xp:selectItem itemLabel="Radio B" itemValue="B"><\/xp:selectItem>
\n\t<\/xp:radioGroup>
\n[\/code]\n
Then, HTML source code is like below. (Domino 9.0.1)<\/p>\n[code lang=”html” highlight=”5,8,11,14″]\n<fieldset id="view:_id1:radioGroup1" class="xspRadioButton">
\n <table role="presentation" class="xspRadioButton">
\n <tr>
\n <td>
\n <label for="view:_id1:radioGroup1:0">
\n <input type="radio" id="view:_id1:radioGroup1:0" name="view:_id1:radioGroup1" value="A">
\n Radio A
\n <\/label>
\n <\/td>
\n <td>
\n <label for="view:_id1:radioGroup1:1">
\n <input type="radio" id="view:_id1:radioGroup1:1" name="view:_id1:radioGroup1" value="B">
\n Radio B
\n <\/label>
\n <\/td>
\n <\/tr>
\n <\/table>
\n<\/fieldset>
\n[\/code]\n
As you can see, label tag has the input tag as a child. In fact, this html structure makes much harder to customize the design for radio button \/ checkbox.<\/p>\n
In the first example of CSS above, there is selector of “input[type=”radio”]:checked+label:before”. This means “when radio button has been checked, change the sibling label design!”. However as the XPages’ HTML structure, you cannot use the selector like first example because generally CSS cannot specify the PARENT element by CHILD element status. ( in this case, input:checked cannot inform the status to the label tag)
\n\uff08It is actually possible if you use the Javascript like jQuery though…\uff09<\/p>\n
As I explained, XPages cannot use the example CSS above. So I needed to find the other way to apply the custom design.<\/p>\n
After spending a lot of try and error, the CSS for XPages radio button control became like below:<\/p>\n[code lang=”css” highlight=””]\nfieldset table td label{
\n\tcursor : pointer;
\n\tposition : relative;
\n\tpadding-left : 5px;
\n\tmargin-right : 20px;
\n\toverflow : hidden;
\n\theight : 20px;
\n\tpadding-left : 22px;
\n\tpadding-top : 8px;
\n\tdisplay : inline-block;
\n}
\nfieldset table td label:before {
\n\tposition : absolute;
\n\twidth : 15px;
\n\theight : 15px;
\n\tborder : 2px solid lightpink;
\n\tborder-radius : 50%;
\n\tleft : 0px;
\n\ttop : 4px;
\n\tcontent : ”;
\n\tz-index : 3;
\n}
\nfieldset table td label:after {
\n\tcontent : ”;
\n\tposition : absolute;
\n\twidth : 11px;
\n\theight : 11px;
\n\tborder-radius : 100%;
\n\tleft : 4px;
\n\ttop : 8px;
\n\tbackground-color : crimson;
\n\tz-index : 1;
\n}
\nfieldset table td label input[type="radio"] {
\n\t-moz-appearance: none;
\n\t-webkit-appearance: none;
\n\tposition : absolute;
\n\tz-index : 2;
\n\twidth : 20px;
\n\theight : 20px;
\n\tleft : -23px;
\n\ttop : 1px;
\n\tmargin : 0px;
\n\tbox-shadow : 20px -1px #fff;
\n}<\/p>\n
fieldset table td label input[type="radio"]:checked {
\n\tbox-shadow : none;
\n}
\nfieldset table td label input[type="radio"]:focus {
\n\topacity : 0.2;
\n\tbox-shadow : 20px -1px #fff;
\n}
\n[\/code]\n
In this CSS, “label:before” specifies the outline of radio button, and “label:after” specifies the checked radio design. The point of this CSS is masking the checked radio design by using “box-shadow” for checked and unchecked status.
\nI know this CSS is more complicated. However you don’t need to apply any javascript or any other html attribute value, and control 100% by just using CSS.
\nBy the way, this CSS does not work on IE8 or less since “box-shadow” is part of CSS3 and IE8 does not support it.<\/p>\n
For more advanced CSS style, for example, you can use the image for radio button design.
\nThe XPages source code below applies the three different type of images and express checked status by using opacity.<\/p>\n[code lang=”xml” highlight=””]\n<?xml version="1.0" encoding="UTF-8"?>
\n<xp:view xmlns:xp="http:\/\/www.ibm.com\/xsp\/core"><\/p>\n
\t<style>
\n\t\tfieldset {border:none;}
\n\t\tfieldset table{
\n\t\tborder:none;
\n\t\twidth:30%;
\n\t\tpadding:10px;
\n\t\t}
\n\t\tfieldset table td {width:50px;}
\n\t\tfieldset table td label{
\n\t\tposition : relative;
\n\t\twidth : 30px;
\n\t\theight : 30px;
\n\t\toverflow : hidden;
\n\t\tcursor : pointer;
\n\t\t}
\n\t\tfieldset table td label:before {
\n\t\tcontent : ”;
\n\t\tdisplay : block;
\n\t\twidth : 30px;
\n\t\theight : 30px;
\n\t\tborder-radius : 100%;
\n\t\tposition : absolute;
\n\t\tz-index : 1;
\n\t\t}
\n\t\tfieldset table td:nth-child(1) label:before{background:url(.\/yes.png)
\n\t\tno-repeat;}
\n\t\tfieldset table td:nth-child(2) label:before{background:url(.\/no.png)
\n\t\tno-repeat;}
\n\t\tfieldset table td:nth-child(3) label:before{background:url(.\/maybe.png)
\n\t\tno-repeat;}
\n\t\tfieldset table td label input[type="radio"] {
\n\t\t-moz-appearance: none;
\n\t\t-webkit-appearance: none;
\n\t\tmargin : 0px;
\n\t\tposition : absolute;
\n\t\tz-index : 2;
\n\t\tleft : -30px;
\n\t\twidth : 0px;
\n\t\theight : 0px;
\n\t\tdisplay : block;
\n\t\tbox-shadow : 30px 0px 0 30px #fff;
\n\t\topacity : 0.7;
\n\t\t}<\/p>\n
\t\tfieldset table td label input[type="radio"]:checked {
\n\t\tbox-shadow : none;
\n\t\topacity : 1;
\n\t\t}
\n\t\tfieldset table td label input[type="radio"]:focus {
\n\t\topacity : 0.0;
\n\t\t}
\n\t\tfieldset table td label input[type="radio"]:hover {
\n\t\tbox-shadow : 30px 0px 0 30px #fff;
\n\t\topacity : 0.5;
\n\t\t}
\n\t<\/style><\/p>\n
\t<xp:radioGroup id="yesno">
\n\t\t<xp:selectItem itemLabel="" itemValue="1">
\n\t\t<\/xp:selectItem>
\n\t\t<xp:selectItem itemLabel="" itemValue="0">
\n\t\t<\/xp:selectItem>
\n\t\t<xp:selectItem itemLabel="" itemValue="2">
\n\t\t<\/xp:selectItem>
\n\t<\/xp:radioGroup>
\n<\/xp:view>
\n[\/code]\n
The image below is the result. When you click the icon image, the image color is displayed clearly and unchecked radio image turns to subtle color. <\/p>\n
![\"custom-radio-img\"](\"https:\/\/www.ktrick.com\/wp-content\/uploads\/2015\/08\/custom-radio-img.png\")
\n<\/p>","protected":false},"excerpt":{"rendered":"
How to apply the CSS […]<\/p>\n","protected":false},"author":1,"featured_media":1341,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19,26,28],"tags":[96,89,94,66],"yoast_head":"\n