переопределить стиль CSS по умолчанию

В «моем» шаблоне я переопределить стиль кнопки и метки радио, как это:переопределить стиль CSS по умолчанию

[type="radio"]:not(:checked), 
[type="radio"]:checked { 
    position: absolute; 
    left: -9999px; 
    visibility: hidden; 
} 

[type="radio"]:not(:checked) + label, 
[type="radio"]:checked + label { 
    position: relative; 
    padding-left: 35px; 
    cursor: pointer; 
    display: inline-block; 
    height: 25px; 
    line-height: 25px; 
    font-size: 1rem; 
    transition: .28s ease; 
    -webkit-user-select: none; 
    -moz-user-select: none; 
     -ms-user-select: none; 
      user-select: none; 
} 

[type="radio"] + label:before, 
[type="radio"] + label:after { 
    content: ''; 
    position: absolute; 
    left: 0; 
    top: 0; 
    margin: 4px; 
    width: 16px; 
    height: 16px; 
    z-index: 0; 
    transition: .28s ease; 
} 

/* Unchecked styles */ 
[type="radio"]:not(:checked) + label:before { 
    border-radius: 50%; 
    border: 2px solid #5a5a5a; 
} 

[type="radio"]:not(:checked) + label:after { 
    border-radius: 50%; 
    border: 2px solid #5a5a5a; 
    z-index: -1; 
    -webkit-transform: scale(0); 
      transform: scale(0); 
} 

/* Checked styles */ 
[type="radio"]:checked + label:before { 
    border-radius: 50%; 
    border: 2px solid transparent; 
} 

[type="radio"]:checked + label:after { 
    border-radius: 50%; 
    border: 2px solid #8bc34a; 
    background-color: #8bc34a; 
    z-index: 0; 
    -webkit-transform: scale(1.02); 
      transform: scale(1.02); 
} 

/* Radio With gap */ 
[type="radio"].with-gap:checked + label:before { 
    border-radius: 50%; 
    border: 2px solid #8bc34a; 
} 

[type="radio"].with-gap:checked + label:after { 
    border-radius: 50%; 
    border: 2px solid #8bc34a; 
    background-color: #8bc34a; 
    z-index: 0; 
    -webkit-transform: scale(0.5); 
      transform: scale(0.5); 
} 

/* Disabled Radio With gap */ 
[type="radio"].with-gap:disabled:checked + label:before { 
    border: 2px solid rgba(0, 0, 0, 0.26); 
} 

[type="radio"].with-gap:disabled:checked + label:after { 
    border: none; 
    background-color: rgba(0, 0, 0, 0.26); 
} 

/* Disabled style */ 
[type="radio"]:disabled:not(:checked) + label:before, 
[type="radio"]:disabled:checked + label:before { 
    background-color: transparent; 
    border-color: rgba(0, 0, 0, 0.26); 
} 

[type="radio"]:disabled + label { 
    color: rgba(0, 0, 0, 0.26); 
} 

[type="radio"]:disabled:not(:checked) + label:before { 
    border-color: rgba(0, 0, 0, 0.26); 
} 

[type="radio"]:disabled:checked + label:after { 
    background-color: rgba(0, 0, 0, 0.26); 
    border-color: #BDBDBD; 
}

Теперь я хочу, чтобы применить полный другой стиль для кнопок и меток радио в DIV и I «ве попытался это:

.cc-selector-2 input[type="radio"] { 
    position: absolute; 
    z-index: 999; 
    display: none !important; /* hide the radio button */ 
} 

.cc-selector-2 input:active +.drinkcard-cc, .cc-selector input:active +.drinkcard-cc { opacity: .9; } 
.cc-selector-2 input:checked +.drinkcard-cc, .cc-selector input:checked +.drinkcard-cc { 
    -webkit-filter: none; 
     -moz-filter: none; 
      filter: none; 
} 

<div class="cc-selector-2"> 
       @Html.RadioButtonFor(model => model.Age, "Age", new { id = "age1", @value = "shakegender", @name = "radio" }) 
       <label class="drinkcard-cc m" id="age1" for="age1"></label> 
      </div>

Я не могу Figur его, почему он не перекрывая и попробовал много вещей, как ссылки на ид (# age1) моей радио-кнопки, но ничего не работает.

спасибо.

источник

2016-02-18 nukleos

[Это может ответить на ваш вопрос] (https://css-tricks.com/specifics-on-css-specificity/) – Nick

Вы используете ту же таблицу стилей или другой? – dippas

У вас есть два разных стиля в двух разных файлах CSS? Если это так, убедитесь, что таблица стилей дополнительного стиля ниже первой в вашем теге <head>.

<head> 

<link rel="stylesheet" type="text/css" href="css/NewDefaultRadio.css" /> 
<link rel="stylesheet" type="text/css" href="css/AddiotionalRadioStyles.css" /> 

</head>

источник

2016-02-18 12:08:08

Да, у меня есть два разных файла css, но кажется правильным, переопределения по умолчанию для переключателей загружаются сначала, ниже того, что я ссылаюсь на дополнительный файл css. Итак, в целом мой дополнительный код css должен работать, и он должен переопределить мой стиль по умолчанию? – nukleos

переопределить стиль CSS по умолчанию

ответ

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