jeudi 22 janvier 2015

HTML elements that act like, but are not, buttons

When a button, input[type="checkbox"] or similar object is clicked, the cursor moved (still over the object) and the mouse button released, the click event is fired on that object. However, if the same action sequence is performed on many other HTML elements, the drag-and-drop function kicks in instead. In Firefox, moving the cursor just a few pixels doesn't trigger drag-and-drop nor clicks the object.


In my case, the annoyance is that a visitor must hold the cursor perfectly still when clicking something for the click to be registered, but I can imagine the button behaviour being appreciated by most in most cases.. since one is far more likely to click an anchor for visiting rather than dragging it somewhere else.


I have tried to style buttons and inputs so that they look and behave identically on all modern browsers but it seems impossible. The other option I can think of is placing elements into another one that would act like a button upon clicks and drag-and-drops but I haven't been able to find one that works. Is this doable at all (without Javascript if possible)?


Here's one example of a failed attempt. I want "Some text" to be treated like a button on clicks (keyboard actions, like tab, are not necessary). As of now, if one clicks and drags, the text is selected.



<label><input type="submit" class="hidden" />Some text</label>


Short version: How can I style buttons and inputs completely OR get other elements that are styleable to act like buttons and inputs?


Thank you.





Aucun commentaire:

Enregistrer un commentaire