Botão dentro de uma legenda
Eu tenho um label
com "for="the pointer to the checkbox input"
" e enquanto eu souber, este for
só pode ser adicionado para label
. Portanto, eu preciso adicionar dentro do label
a <button>
(Eu preciso dele), mas o evento click não está funcionando corretamente - ele não verifica a opção para a qual for
está apontando.
quais são as possibilidades que posso usar aqui se tiver de colocar <button>
dentro do label
, com apenas codificação html+css?
algum código por exemplo:
<input type="checkbox" id="thecheckbox" name="thecheckbox">
<div for="thecheckbox"><button type="button">Click Me</button></div>
5 answers
Acontece que você pode fazer um <button>
operar uma entrada, mas só se você colocar o <label>
dentro a <button>
.
<button type="button">
<label for="my-checkbox">Button go outside the label</label>
</button>
<input type="checkbox" id="my-checkbox">
Embora isto contrarie as especificações do W3C:
O rótulo do elemento interactivo não deve aparecer como um descendente do elemento botão. https://www.w3.org/TR/html-markup/label.html
Pode usar um pseudo elemento transparente que sobrepõe a opção e o próprio botão que irá capturar os Eventos do rato.
Aqui está um exemplo: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;
}
A melhor solução é o estilo como um botão.
Se estiver a usar um framework CSS, como o bootstrap, poderá indicar as classes label como o btn e o btn-default. Isto vai Estilo-lo como um botão. Poderá ter de ajustar manualmente a propriedade css da altura da linha, assim:
label.btn {
line-height: 1.75em;
}
Então, para obter os estilos 'on click' como um botão, adicione estes estilos:
input[type=radio]:checked ~ label.btn {
background-color: #e6e6e6;
border-color: #adadad;
color: #333;
}
Isto irá ter a entrada que está assinalada e dar o próximo elemento de etiqueta no dom que tem a classe btn, bootstrap btn-o botão predefinido clicou em estilos. Ajustar as cores como se encaixam.
Sugiro que use a forma normal de usar a opção e use o estilo css para fazer com que pareça com o botão porque acho que não precisa de um botão que está apenas a tentar obter a aparência do botão e o botão está lá para ser usado como botão seria mau como a validação html também deve usar sempre a marca para o propósito que são feitas para
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()
}
O alvo é o alvo click, o actual alvo é o rótulo neste caso.
Sem a indicação if O evento é disparado duas vezes se clicado fora da área de prevenção do evento.
Não foi testado o navegador cruzado.