單選按鈕作為圖像卡片

Question

我是使用 CSS 進行造型的新手。我正在嘗試將圖像卡添加為單選按鈕。 我參考了SO中的多篇文章並使用了 Codepen 。

我嘗試了以下內容：

• 將標准無線電輸入包裝在label

• 在這個label中，就在input type="radio"之后，現在添加一個樣式為卡片的簡單div

 console.log($(".test:checked").val())

 /* HIDE RADIO */ [type=radio] { position: absolute; opacity: 0; width: 20%; height: 20%; } /* IMAGE STYLES */ [type=radio] + card { cursor: pointer; width: 20%; height: 20%; } /* CHECKED STYLES */ [type=radio]:checked + card { outline: 2px solid #f00; width: 20%; height: 20%; } /* Section */ section { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }.cards { display: flex; }.card { position: relative; width: 17rem; height: 17rem; margin: .5rem; border: 1px solid #EEE; border-radius: 1rem; background-repeat: no-repeat; background-position: center bottom; background-size: 100%; overflow: hidden; cursor: pointer; transition: background-size.4s; }.card:hover { background-size: 110%; }.card::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 80px; opacity: 0; background-color: rgba(255, 255, 255, .3); background-repeat: no-repeat; background-position: center bottom; background-size: 100%; transition: .2s; }.card:hover::before { opacity: 1; filter: blur(5px); background-size: 110%; }.card.title { opacity: 0; font-size: 12px; padding: 1rem; transform: translateY(13.5rem); transition: .2s; }.card:hover.title { opacity: 1; transform: translateY(13rem); }.card.dark.title { color: white }.card.loan-business, .card.loan-business::before { background-image: url("https://image.freepik.com/free-vector/bank-loan-small-business-flat-vector-concept_81522-3733.jpg"); }.card.loan-personal, .card.loan-personal::before { background-image: url("https://www.loanqubes.com/campaign/new-personal/images/banner-vector.png"); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <section> <ul class="cards"> <li class="card loan-business"> <label> <input type="radio" name="test" id="test" value="business"> </label> <div class="title"> <h3>Business Loan</h3> </div> </li> <li class="card loan-personal"> <label> <input type="radio" name="test" id="test" value="personal"> </label> <div class="title"> <h3>Personal Loan</h3> </div> </li> </ul> </section>

感謝您的時間和考慮。

Answer 1

您的代碼有效，但無線電輸入的命中區域太小，與.card元素的大小不匹配。 要解決此問題，請將 CSS 中的width和height設置為100% 。

另請注意，您用於測試的 JS 需要修改以偵聽收音機上的change事件，而不僅僅是頁面加載時的 output。 此外，您還復制了無效的#test id HTML，因為這些值必須是唯一的。 我將它們更改為類來解決這個問題。

 $('.test').on('change', e => console.log(e.target.value));

 [type=radio] { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; } [type=radio]+card { cursor: pointer; width: 20%; height: 20%; } [type=radio]:checked+card { outline: 2px solid #f00; width: 20%; height: 20%; } section { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; }.cards { display: flex; }.card { position: relative; width: 17rem; height: 17rem; margin: .5rem; border: 1px solid #EEE; border-radius: 1rem; background-repeat: no-repeat; background-position: center bottom; background-size: 100%; overflow: hidden; cursor: pointer; transition: background-size.4s; }.card:hover { background-size: 110%; }.card::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 80px; opacity: 0; background-color: rgba(255, 255, 255, .3); background-repeat: no-repeat; background-position: center bottom; background-size: 100%; transition: .2s; }.card:hover::before { opacity: 1; filter: blur(5px); background-size: 110%; }.card.title { opacity: 0; font-size: 12px; padding: 1rem; transform: translateY(13.5rem); transition: .2s; }.card:hover.title { opacity: 1; transform: translateY(13rem); }.card.dark.title { color: white }.card.loan-business, .card.loan-business::before { background-image: url("https://image.freepik.com/free-vector/bank-loan-small-business-flat-vector-concept_81522-3733.jpg"); }.card.loan-personal, .card.loan-personal::before { background-image: url("https://www.loanqubes.com/campaign/new-personal/images/banner-vector.png"); }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <section> <ul class="cards"> <li class="card loan-business"> <label> <input type="radio" name="test" class="test" value="business" /> </label> <div class="title"> <h3>Business Loan</h3> </div> </li> <li class="card loan-personal"> <label> <input type="radio" name="test" class="test" value="personal" /> </label> <div class="title"> <h3>Personal Loan</h3> </div> </li> </ul> </section>