Unobtrusive, yet usable span buttons?

I want to create styled buttons using span tags, that act more or less like a <button> tag. Rapidly clicking the button shouldn't select any text inside or outside it's element, or be able to select text at all, and should also have a pointer cu开发者_Go百科rsor.

Assigning a plain <span> tag to a .click() event in jQuery will function fine, but not act like a proper button. I have no idea how to accomplish this except use an <a> tag instead, using # or a javascript: link for the href attribute. but that pretty much defeats the purpose of unobtrusive JavaScript. Plus, anchor links already have underlined text, and colors that need overriding.

All in all, how can I accomplish a unobtrusive span button? Without relying on anchors or an actual button input tag. Thanks.

Update

You can use these styles to prevent selection:

-webkit-user-select:none;
-moz-user-select:none;

See Demo Here

Please note that above will work only in webkit and mozilla browsers.

As far as I understand it, jQuery is made to go unobstrusive easiest. You can do like this:

$(function(){
    $('#span_id').click(function(){
      // your code here...
    });
});

Note that <span> tag is inline elements, you need to make it block-level with display:block to apply width and height to it and make it look like a button.

Having said that, I wonder why you can't/don't use a button instead and make your code semantically valid.

This may be a crazy idea, but you could use buttons as buttons. They can be styled just like everything else can.

The 'span button'

<span class="spanbutton" title="Span Button!" onclick="spanButtonFunction()">Span Button!</span>

The styling:

.spanbutton {
    color:#000000;
    border:1px solid #000000;
    padding-left:8;
    padding-right:8px;
    border-radius:3px;
    cursor:pointer;
    font-family: arial;
    font-size:small;

    /*prevent selection*/
    -webkit-user-select:none;
    -moz-user-select:none;

    /* fallback */
    background-color:#EEEEEE;

    /* Safari 4-5, Chrome 1-9 */
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#CCCCCC),     to(#F4F4F4));

    /* Safari 5.1, Chrome 10+ */
    background: -webkit-linear-gradient(top, #F4F4F4, #CCCCCC);

    /* Firefox 3.6+ */
    background: -moz-linear-gradient(top, #F4F4F4, #CCCCCC);

    /* IE 10 */
    background: -ms-linear-gradient(top, #F4F4F4, #CCCCCC);

    /* Opera 11.10+ */
    background: -o-linear-gradient(top, #F4F4F4, #CCCCCC);
}

And of course your script for the function of the button.

Additionally, when you click the button if you want to code the appearance of a button 'mid-click', jQuery will help :

$(document).ready(function (){
    $(".spanbutton").bind("mousedown", function(e){
            buttondown(this);
    });
    $(".spanbutton").bind("mouseup", function(e){
            buttonup(this);
    });
    $(".spanbutton").bind("mouseout", function(e){
            buttonup(this);
    });
});

function buttondown(button) {
    button.className = "downbutton";
}

function buttonup(button) {
    button.className = "spanbutton";
}

And some more styling for the 'down' button:

.downbutton {
    color:#000000;
    border:1px solid #333333;
    padding-left:8px;
    padding-right:8px;
    border-radius:3px;
    cursor:pointer;
    font-family: arial;
    font-size:small;

    /*prevent selection*/
    -webkit-user-select:none;
    -moz-user-select:none;

    background-color:#BBBBBB;
}

Vote if you like it! This will inspire me to do more in-detail responses like this