¿Cómo puedo editar este codepen para permitir solo marcar un artículo, y si otro artículo está marcado, el anterior está desmarcado y usar una imagen personalizada para el cheque en lugar del cheque actual generado automáticamente?
<!-- Example Dropdown --> <div class="dropdown"> <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown">Menu</button> <div class="dropdown-menu"> <a href="#" class="dropdown-item">Item 1</a> <a href="#" class="dropdown-item dropdown-item-checked">Item 2</a> <a href="#" class="dropdown-item">Item 3</a> </div> </div> <p class="mt-4"> <a href="https://www.abeautifulsite.net/adding-a-checked-state-to-bootstrap-4-dropdown-menus">View the original post</a> </p> <p> This code is by <a href="https://twitter.com/claviska">@claviska</a> and has been released into the public domain. </p> .dropdown-item-checked::before { position: absolute; left: .4rem; content: '✓'; font-weight: 600; } body { padding: 1rem; } // Toggle checkmarks $(document).on('click', '.dropdown-item', function(event) { event.preventDefault(); $(this).toggleClass('dropdown-item-checked'); });No veo por qué ocultar el botón de opción sería un problema (no me refiero a la accesibilidad, solo me refiero a lo que quieres lograr).
¿Es eso lo que quieres?
[name=items] { display: none; } label { display: block; padding-left: 1rem; } :checked + label::before { position: absolute; left: .4rem; content: '✓'; font-weight: 600; } <input type="radio" name="items" id="item-1"> <label for="item-1">Item 1</label> <input type="radio" name="items" id="item-2" checked> <label for="item-2">Item 2</label> <input type="radio" name="items" id="item-3"> <label for="item-3">Item 3</label>