Как удалить границу из jQuery mobile radio buttons

Я хотел бы сохранить некоторую форму, но удалить границу переключателей jQuery. Было бы также очень приятно иметь тему, у которой нет теней. Есть ли чистая версия jQM? Я использовал ThemeRoller, но я все еще получаю тени в тексте и нашли никакого способа, чтобы удалить стиль ...Как удалить границу из jQuery mobile radio buttons

<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

Синее, что я хочу, чтобы иметь зеленый цвет является то, что у меня есть прямо сейчас. Синий от http://www.maratz.com/blog/archives/2006/06/11/fancy-checkboxes-and-radio-buttons/ Я хочу заменить стиль jQM для фэнтезийных флажков.

источник

2012-06-06 Astronaut

Можете ли вы быть более описательный на то, что вы имели в виду границы? – uday

Пожалуйста, покажите изображение и код. – powtac

обновлен с кодом и рисунком – Astronaut

Вот некоторые стили, которые вы можете . добавить в нижней части, чтобы получить довольно близко к тому, что вы ищете (построен наверх ответ twsansbury в)

/* 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; 
}

Результат:

enter image description here

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

источник

2012-06-15 03:54:51

Это довольно близко к желаемому эффекту! Благодаря! – Astronaut

Переопределение некоторых стилей с! Важно для вашего собственного css должно быть достаточно (например. NameofJqueryStyle {border: none! Important;}). Вы можете определить стили, на которые хотите настроить таргетинг, используя FireBug или Chrome Dev Tools.

источник

2012-06-06 17:50:48 xoloescuincle

Кажется, что есть выделение края, используемого для стиля радио и контрольных кнопок ... его довольно сложно удалить ... – Astronaut

Я был в состоянии удалить границы вокруг радио и CheckBox кнопок, а также удалить текст тень, поместив следующий CSS в нижней части моего Jquery мобильной темы:

.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; 
}

источник

2012-06-11 14:02:11

Можете ли вы опубликовать картинку или скрипку? Благодаря! – Astronaut

Я использовал [jquerymobile themeroller] (http://jquerymobile.com/themeroller/?ver=1.1.0&style_id=20120611-89), установив только цвет. Загрузили его, немного изменили HTML-код с помощью html и создали это [jsfiddle] (http://jsfiddle.net/bJHrM/2/).В нижней части css я прокомментировал стиль удаления границ и текстовой тени. Этот [jsfiddle] (http://jsfiddle.net/bJHrM/3/) основан на первом, но код больше не комментируется, удаляя текстовую тень и границу. Кроме того, [здесь] (http://jsfiddle.net/bJHrM/1/) - пример с параметрами, находящимися в одной и той же группе управления. –

Hi twsansbury hte проблема в том, что у вас все еще есть синяя коробка. Что я хочу, так это избавиться от элемента box и применить другой стиль. Я хочу полностью удалить вид jQuery из полей выбора. – Astronaut

Использование данных-темы, которые вы не создали. Например, если вы создали Swatch A, B, C и D, использование:

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

Это будет делать, если вы пытаетесь избавиться от границ, но вы увидите фоновое изображение в окошке. Чтобы избавиться от этого, создайте таблицу стилей, которую вы будете использовать, чтобы переопределить стили мобильных jquery и включить их после таблицы стилей jquery mobile. Например:

<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" />

Затем в custom.css вставьте следующее:

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

, где цвет фона является цветом вашего выбора, когда радиокнопка находится в неактивном состоянии.

Я пытался достичь того же, как вы, но за один CheckBox/радиокнопки и это работало для меня, так что я думал, что я поделюсь :)

источник

2012-06-15 19:01:10 WhatsInAName

Как удалить границу из jQuery mobile radio buttons

ответ

Смежные вопросы