CODEWITHSUNDEEP
jquerycssjquery-mobile
Astronaut
Astronaut

Reputation: 7051

How to remove border from jquery mobile radio buttons

I would like to retain some formating but remove the border of jQuery radio buttons. It would also be very nice to have a theme that has no shadows. Is there a clean version of jQM? I used the themeroller but I still get shadows in text and found no way to remove the styling...

<div data-role="fieldcontain" data-mini="true">
  <div data-role="fieldcontain">
    <fieldset data-role="none">
      <input type="radio" name="" id="Select_0" value="" />
      <label for="Select_0">option1</label>
      <input type="radio" name="" id="Select_1" value="" />
      <label for="Select_1">option1</label>
      <input type="radio" name="" id="Select_2" value="" />
      <label for="Select_2">option1</label>
      <input type="radio" name="" id="Select_3" value="" />
      <label for="Select_3">option1</label>
    </fieldset>
  </div> 
</div>

what I want radio problems

The blue is what I want to have the green is what I have right now. The blue is from http://www.maratz.com/blog/archives/2006/06/11/fancy-checkboxes-and-radio-buttons/ I want to replace the jQM style for the fancy-checkboxes.

Upvotes: 3

Views: 11101

Answers (4)

WhatsInAName
WhatsInAName

Reputation: 724

Use a data-theme that you haven't created. For example, if you've created Swatch A, B, C and D, use:

    <input type="radio" name="" id="Select_0" value="" data-theme="e" />

This will do if you try to get rid of the borders but you will see a background image on the checkbox. To get rid of that, create a stylesheet what you will use to override the jquery mobile styles and include in after the jquery mobile stylesheets. For example:

<link rel="stylesheet" href="/MyApp/Content/themes/CustomTheme.css" />
 <link rel="stylesheet" href="/MyApp/Content/jquery.mobile.structure-1.1.0.css" />
 <!-- Custom stylesheet overriding styles -->
 <link rel="stylesheet" href="/MyApp/Content/Custom.css" />

Then, in Custom.css, insert the following:

.ui-checkbox-off .ui-icon, .ui-radio-off .ui-icon
{
  background-color: #ADADAD;
}

where the background-color is the color of your choice when the radiobutton is in inactive state.

I was trying to achieve the same thing as you but for one checkbox/radiobutton and this worked for me so I thought I would share :)

Upvotes: 1

Chris Mohr
Chris Mohr

Reputation: 3939

Here are some styles you can add to the bottom to get pretty close to what you're looking for.(built ontop of twsansbury's answer)

/* remove rounded corners */
.ui-btn-corner-all {
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
}

/* remove border between each item */
.ui-btn-inner{
  border: 0;
}

/* remove margin between items */
fieldset .ui-radio {
  margin: 0;
}

/* change background, remove other border, unbold text */
.ui-btn-up-a, .ui-btn-hover-a, .ui-btn-down-a {
  background: #4f83bc;
  background-image: none;
  border: 0;
  font-weight: normal;
}


/* change color of radio background */
.ui-checkbox-on .ui-icon, .ui-radio-on .ui-icon {
  background-color: #456;
}

Result:

enter image description here

http://jsfiddle.net/bJHrM/7/

Upvotes: 2

Tanner Sansbury
Tanner Sansbury

Reputation: 51971

I was able to remove borders around radio and checkbox buttons, as well as remove the text shadows by placing the following css at the bottom of my jquery mobile theme:

.ui-checkbox .ui-btn-inner,
.ui-radio .ui-btn-inner
{
  border: none;
}

.ui-checkbox .ui-btn-up-a,
.ui-checkbox .ui-btn-hover-a,
.ui-checkbox .ui-btn-down-a,
.ui-radio .ui-btn-up-a,
.ui-radio .ui-btn-hover-a,
.ui-radio .ui-btn-down-a
{
  border: none;
  text-shadow: none;
}

Upvotes: 2

xoloescuincle
xoloescuincle

Reputation: 61

Overriding certain styles with !important on you own css should suffice (eg. .nameofJqueryStyle {border: none !important;} ). You can figure out the styles you want to target using either FireBug or Chrome Dev Tools.

Upvotes: 2

Related Questions