Радиоприемник не работает на Click

Question

Это мой первый вопрос, поэтому, пожалуйста, простите меня, если я неясен, задайте неосведомленный вопрос или нарушите любые написанные неписаные правила программирования. Я очень начинающий кодер и обещаю, что это не мое намерение!

Я работаю над простой формой пожертвования для своей компании. Будет набор кнопок, где донор может выбирать из заданных заранее определенных количеств или вручную вводить свою собственную сумму. Я использую переключатели, которые я разработал, чтобы выглядеть как кнопки блоков. У меня возникли проблемы с тем, чтобы кнопка оставалась на месте (выбранная кнопка должна оставаться красной). Я попробовал все, что мог, для устранения неполадок, и почувствовал, что я вернулся туда, где начал. Любая помощь очень ценится!

.amount_list input { 
 
    z-index: 999; 
 
    visibility: hidden; 
 
    position: absolute; 
 
} 
 
label { 
 
    padding: 10px 20px; 
 
    border: 1px solid #d50032; 
 
    cursor: pointer; 
 
    z-index: 90; 
 
    border-radius: 5px; 
 
    background: #fff; 
 
    font-family: Arial, sans-serif; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    color: #d50032; 
 
    display: inline-block; 
 
    float: left; 
 
    margin: 5px 10px 5px 0; 
 
} 
 
.amount_list { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    overflow: auto; 
 
    float: left; 
 
} 
 
.gift_amount:hover { 
 
    background: #d50032; 
 
    color: #fff; 
 
    border-radius: 5px; 
 
    text-align: center; 
 
    font-family: Arial, sans-serif; 
 
} 
 
.gift_amount + input:checked { 
 
    -webkit-filter: none; 
 
    -moz-filter: none; 
 
    filter: none; 
 
    background: #d50032; 
 
    border: 1px solid #d50032; 
 
    opacity: ; 
 
    border-radius: 5px; 
 
    text-align: center; 
 
    font-family: Arial, sans-serif; 
 
    color: #fff; 
 
} 
 
#inputother { 
 
    border-radius: 5px; 
 
    border: 1px solid #ccc; 
 
    visibility: visible; 
 
    padding: 12px 5px; 
 
    margin: 0 5px; 
 
}

<div class="amount_list"> 
 
    <label class="gift_amount"> 
 
    <input type="radio" value="1000" name="amount" />$1,000</label> 
 
    <label class="gift_amount"> 
 
    <input type="radio" value="500" name="amount" />$500</label> 
 
    <label class="gift_amount"> 
 
    <input type="radio" value="250" name="amount" />$250</label> 
 
    <label class="gift_amount"> 
 
    <input type="radio" value="100" name="amount" />$100</label> 
 
    <label class="gift_amount" for="other"> 
 
    <input type="radio" value="other" name="amount" id="other">Other</label> 
 
    <input id="inputother" type="text" onchange="changeradioother()" /> 
 
</div>

Как я уже говорил, я новичок, когда дело доходит до кодирования, так любые ошибки, неаккуратно код или плохие привычки он выглядит, я могу узнать из, пожалуйста, дайте мне знать. Спасибо!

Answer 1

Вы пытаетесь создать элемент parent, который не может быть выполнен с помощью CSS.

Wrap цена в <span>, и стиль, который вместо того, чтобы:

.amount_list input { 
 
    z-index: 999; 
 
    visibility: hidden; 
 
    position: absolute; 
 
} 
 
label span { 
 
    padding: 10px 20px; 
 
    border: 1px solid #d50032; 
 
    cursor: pointer; 
 
    z-index: 90; 
 
    border-radius: 5px; 
 
    background: #fff; 
 
    font-family: Arial, sans-serif; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    color: #d50032; 
 
    display: inline-block; 
 
    float: left; 
 
    margin: 5px 10px 5px 0; 
 
} 
 
.amount_list { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    overflow: auto; 
 
    float: left; 
 
} 
 
.gift_amount:hover span { 
 
    background: #d50032; 
 
    color: #fff; 
 
} 
 
.gift_amount input:checked + span { 
 
    background: #d50032; 
 
    color: #fff; 
 
}

<div class="amount_list"> 
 
    <label class="gift_amount"> 
 
    <input type="radio" value="1000" name="amount" /> 
 
    <span>$1,000</span> 
 
    </label> 
 
    <label class="gift_amount"> 
 
    <input type="radio" value="500" name="amount" /> 
 
    <span>$500</span> 
 
    </label> 
 
    <label class="gift_amount"> 
 
    <input type="radio" value="250" name="amount" /> 
 
    <span>$250</span> 
 
    </label> 
 
    <label class="gift_amount"> 
 
    <input type="radio" value="100" name="amount" /> 
 
    <span>$100</span> 
 
    </label> 
 
    <label class="gift_amount" for="other"> 
 
    <input type="radio" value="other" name="amount" id="other"> 
 
    <span>Other</span> 
 
    </label> 
 
</div>

Answer 2

Для того, чтобы работать, вы должны внести изменения разметки + коррекция правила CSS, где вы положили input перед label и поменять CSS для

input:checked + .gift_amount {...} 

id также необходимо вместе с атрибутом for, Сопряжение label с input

Sample

.amount_list input { 
 
    z-index: 999; 
 
    visibility: hidden; 
 
    position: absolute; 
 
} 
 
label { 
 
    padding: 10px 20px; 
 
    border: 1px solid #d50032; 
 
    cursor: pointer; 
 
    z-index: 90; 
 
    border-radius: 5px; 
 
    background: #fff; 
 
    font-family: Arial, sans-serif; 
 
    font-size: 14px; 
 
    font-weight: bold; 
 
    color: #d50032; 
 
    display: inline-block; 
 
    float: left; 
 
    margin: 5px 10px 5px 0; 
 
} 
 
.amount_list { 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
    overflow: auto; 
 
    float: left; 
 
} 
 
.gift_amount:hover { 
 
    background: #d50032; 
 
    color: #fff; 
 
    border-radius: 5px; 
 
    text-align: center; 
 
    font-family: Arial, sans-serif; 
 
} 
 
input:checked + .gift_amount { 
 
    background: #d50032; 
 
    border: 1px solid #d50032; 
 
    opacity: ; 
 
    border-radius: 5px; 
 
    text-align: center; 
 
    font-family: Arial, sans-serif; 
 
    color: #fff; 
 
} 
 
#inputother { 
 
    border-radius: 5px; 
 
    border: 1px solid #ccc; 
 
    visibility: visible; 
 
    padding: 12px 5px; 
 
    margin: 0 5px; 
 
}

<div class="amount_list"> 
 
    
 
    <input id="a1000" type="radio" value="1000" name="amount" /> 
 
    <label for="a1000" class="gift_amount">$1,000</label> 
 

 
    <input id="a500" type="radio" value="500" name="amount" /> 
 
    <label for="a500" class="gift_amount">$500</label> 
 

 
</div>