diff --git a/scss/ionic/_form.scss b/scss/ionic/_form.scss
index a86f4b329c..09e9fcb6dd 100644
--- a/scss/ionic/_form.scss
+++ b/scss/ionic/_form.scss
@@ -182,7 +182,6 @@ input[type="color"],
}
-
// Position radios and checkboxes better
input[type="radio"],
input[type="checkbox"] {
@@ -237,11 +236,28 @@ textarea {
}
-// Search
+// Radio Buttons
// -------------------------------
-input[type="search"] {
- border-radius: 4px;
+/* hide a radio button's icon by default */
+.radio-item {
+ [class^="icon-"],
+ [class*=" icon-"] {
+ display: none;
+ }
+}
+
+.input-wrapper input[type="radio"] {
+ /* hide any radio button inputs (the ugly circles) */
+ display: none;
+
+ /* when this radio-item is checked */
+ &:checked + .radio-item {
+ [class^="icon-"],
+ [class*=" icon-"] {
+ display: inline;
+ }
+ }
}
diff --git a/test/index.html b/test/index.html
index 148841ffc5..36aa77abf9 100644
--- a/test/index.html
+++ b/test/index.html
@@ -29,6 +29,7 @@
Input: Text (multi-line)
Inputs With Icons
Input: Toggle
+ Input: Radio Buttons
Lists
Modals
Panels
diff --git a/test/input-radio.html b/test/input-radio.html
new file mode 100644
index 0000000000..a87d998838
--- /dev/null
+++ b/test/input-radio.html
@@ -0,0 +1,72 @@
+
+
+
+ Radio Inputs
+
+
+
+
+
+
+
+
+
+
+
+