Przycisk na etykiecie

Question

Mam label z "" i tak długo, jak wiem, ten for może być dodany tylko dla label. Dlatego muszę dodać wewnątrz label a <button> (potrzebuję tego), ale zdarzenie click nie działa poprawnie - nie zaznacza pola wyboru, na które wskazuje for.

Jakie są możliwości mogę użyć tutaj jeśli muszę umieścić <button> wewnątrz label, z tylko html + css kodowania?

jakiś kod na przykład:

<input type="checkbox" id="thecheckbox" name="thecheckbox"> 
<div for="thecheckbox"><button type="button">Click Me</button></div> 

Answer 1

Można użyć przezroczystego elementu pseudo, który zostanie nałożony pole i przycisk się, że złapie zdarzeń myszy.

Oto przykład:

html:

<label> 
    <input type="checkbox"> 
    <button class="disable">button</button> 
</label> 

css:

.disable{pointer-events:fill} 
label{position:relative} 
label:after{ 
    position: absolute; 
    content: ""; 
    width: 100%; 
    height: 100%; 
    background: transparent; 
    top:0; 
    left:0; 
    right:0; 
    bottom:0; 
} 

Answer 2

chciałbym sugerują, że należy użyć normalny sposób korzystać z pola wyboru i użyć stylów CSS aby wyglądał jak przycisk bo nie myślę, że potrzebujesz przycisku, tylko próbujesz uzyskać wygląd przycisku i przycisk jest do użycia jako przycisk, to byłoby złe, ponieważ sprawdzanie html też powinno być zawsze s użyj znacznika dla celów są one wykonane na

Answer 3

Okazuje się, można zrobić <button> obsługiwać wejście, ale tylko wtedy, gdy można umieścić <label>wewnątrz<button>.

<button type="button"> 
 
    <label for="my-checkbox">Button go outside the label</label> 
 
</button> 
 
<input type="checkbox" id="my-checkbox">

Chociaż ten jest sprzeczny z W3C specyfikacje:

Interaktywny elementem etykiety nie musi pojawić się jako potomek elementu przycisku. https://www.w3.org/TR/html-markup/label.html

Answer 4

HTML:

<label for="whatev" 
     onclick="onClickHandler"> 
    <button>Imma button, I prevent things</button> 
</label> 

JS:

const onClickHandler = (e) => { 
    if(e.target!==e.currentTarget) e.currentTarget.click() 
} 

docelowa jest celem kliknięcie, currentTarget jest etykieta w tej sprawie.

Bez instrukcji if zdarzenie jest uruchamiane dwukrotnie, jeśli kliknięto poza obszarem zapobiegania zdarzeniom.

Nie przetestowano pod kątem przeglądarki.

Answer 5

Najlepszym rozwiązaniem jest styl jest jak przycisk.

Jeśli używasz architektury CSS, takiej jak bootstrap, możesz podać klasy etykiet, takie jak btn i btn-default. Będzie to stylować jak przycisk.Być może trzeba dostosować właściwości CSS z line-height ręcznie tak:

label.btn { 
    line-height: 1.75em; 
} 

Następnie, aby uzyskać po kliknięciu stylów jako przycisk, dodać te style:

input[type=radio]:checked ~ label.btn { 
    background-color: #e6e6e6; 
    border-color: #adadad; 
    color: #333; 
} 

Zajmie dane wejściowe, które są sprawdzane i podać następny element etykiety w domie, który ma klasę btn, przycisk bootstrap btn-default kliknął style. Dostosuj kolory jako dopasowane.