Skip to content

Instantly share code, notes, and snippets.

@christiankn

christiankn/index.html

Created April 15, 2012 12:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save christiankn/2392643 to your computer and use it in GitHub Desktop.
Save christiankn/2392643 to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap-styled radio-buttons for JSF 2
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>RadiobuttonsDemo</title>
<link rel="stylesheet" href="radio-buttons.css" type="text/css" />
</head>
<body>
<form>
<table class="toggle-radio-buttons">
<tr>
<td class="selected">
<input type="radio" name="j_idt6:j_idt8" id="j_idt6:j_idt8:0" value="Red" />
<label for="j_idt6:j_idt8:0">Alternativet er dette</label></td>
<td>
<input type="radio" name="j_idt6:j_idt8" id="j_idt6:j_idt8:1" value="Green" />
<label for="j_idt6:j_idt8:1"> Color1 - Green</label></td>
<td>
<input type="radio" name="j_idt6:j_idt8" id="j_idt6:j_idt8:2" value="Blue" />
<label for="j_idt6:j_idt8:2">Og</label>
</td>
</tr>
</table>
</form>
</body>
</html>
<!--
Generert med utgangspunkt i:
<h:selectOneRadio value="#{user.favColor1}" styleClass="toggle-radio-buttons">
<f:selectItem itemValue="Red" itemLabel="Color1 - Red" />
<f:selectItem itemValue="Green" itemLabel="Color1 - Green" />
<f:selectItem itemValue="Blue" itemLabel="Color1 - Blue" />
</h:selectOneRadio>
Det du med andre ord må legge til en standard h:selectOneRadio er:
styleClass="toggle-radio-buttons"
-->
Raw
toggle-radio-buttons.css
body {
margin: 0;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 18px;
color: #333333;
background-color: #ffffff;
}
table.toggle-radio-buttons td {
display: inline-block;
padding: 0;
margin-bottom: 0;
font-size: 13px;
line-height: 18px;
color: #333333;
text-align: center;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
vertical-align: middle;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -ms-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(top, #ffffff, #e6e6e6);
background-repeat: repeat-x;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
border: 1px solid #cccccc;
border-bottom-color: #b3b3b3;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
background-color: #0074cc;
background-image: -moz-linear-gradient(top, #0088cc, #0055cc);
background-image: -ms-linear-gradient(top, #0088cc, #0055cc);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0055cc));
background-image: -webkit-linear-gradient(top, #0088cc, #0055cc);
background-image: -o-linear-gradient(top, #0088cc, #0055cc);
background-image: linear-gradient(top, #0088cc, #0055cc);
background-repeat: repeat-x;
border-color: #0055cc #0055cc #003580;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
position: relative;
float: left;
margin-left: -1px;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
cursor: pointer;
}
table.toggle-radio-buttons td:first-child{
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
table.toggle-radio-buttons td:last-child {
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
}
table.toggle-radio-buttons td label {
color: rgba(247,255,255,1);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
table.toggle-radio-buttons td:hover label {
color: rgba(247,255,255,1);
text-decoration: none;
background-color: #0074cc;
background-image: linear-gradient(top, #ffffff, #e6e6e6);
background-repeat: repeat-x;
background-position: 0 -30px;
}
table.toggle-radio-buttons td label {
padding: 4px 10px 4px;
display: inline-block
}
table.toggle-radio-buttons input[type="radio"] {
cursor: pointer;
opacity: 0;
position: absolute;
width: 80%;
}
table.toggle-radio-buttons input[type="radio"]:checked + label{
color:
rgba(185,207,230,1);
background-image: none;
-webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
background-color: #0074cc;
outline: 0;
}
@christiankn
Copy link
Author

Bare testet i Safari
Mye duplikasjon– har copy-pastet.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment