Split button dropdown without javascript

Good day to all!

Most recently, I needed to create some kind of multi-action control for a list of records. The use of split button dropdown immediately came to mind . in this case, the submit button for the form combined with the action drop-down list. Such controls can often be found in modern interfaces. There are also ready-made solutions included in assemblies such as Twitter Bootstrap .

However, implementations like bootstraps do not like for several reasons:

• redundant and not quite neurological markup
• javascript sharpening

It is for these reasons that I decided to close up my own version of such control. I want to note right away that it was not possible to implement all the ideas, so the method does not claim to be a complete replacement for js-solutions. Again, I post it only for those who will be useful.

Actually, the solution is based on the idea presented by me in the article Simple customization of Checkbox and Radio .

Just want to note that the example below is simplified, so it may not be completely cross-browser. In it, I decided not to focus on the full calculation of styles, the use of browser prefixes for properties, half-filters, etc. Although the option is without a doubt completely working.
Only the code goes further.

Markup

    Action
    ▼
        

                
            Edit
            Delete
            Read
            Spam
        

    

Styles

button, label {cursor: pointer;}
button,
button + label {
    float: left;
    display: inline-block;
    margin: 0;
    background: # 659A22 repeat-x;
    background-image: -webkit-linear-gradient (top, # 9AC92C, # 659A22);
    background-image: -o-linear-gradient (top, # 9AC92C, # 659A22);
    background-image: -moz-linear-gradient (top, # 9AC92C, # 659A22);
    background-image: linear-gradient (top, # 9AC92C, # 659A22);
    border: 1px solid rgba (0, 0, 0, 0.0976563);
    border-bottom-color: rgba (0, 0, 0, 0.246094);
    border-top-color: rgba (255, 255, 255, 0.148438);
    color: #fff;
    font-size: 13px;
    cursor: pointer;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 16px;
    padding: 5px 10px;
    text-shadow: # 659A22 1px 1px 0px;
    -webkit-transition: 0.1s linear all;
    transition: 0.1s linear all;
    vartical-align: middle;
}
button: hover, button + label: hover {
    text-decoration: none;
    background-color: # 659A22;
    background-position: 0 -15px;
    -webkit-transition: background-position 0.1s linear;
    -o-transition: background-position 0.1s linear;
    -moz-transition: background-position 0.1s linear;
    transition: background-position 0.1s linear;  
}
button {border-top-left-radius: 3px; border-bottom-left-radius: 3px; }
button: active {
    color: #fff;
    box-shadow: inset 0 2px 4px rgba (0,0,0,0.15), 0 1px 2px rgba (0,0,0,0.05);     
}
button + label {
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
    position: relative;   
}
button + label: hover> ul {
    visibility: visible;
    opacity: 1;
    margin: 0;  
}
ul {
    visibility: hidden;
    position: absolute;
    top: 30px;
    right: 0;
    width: 90px;
    margin: 20px 0 0 0;
    padding: 10px 0;
    z-index: 9999;
    border: 1px solid #ccc;
    border-top-clor: #cfcfcf;
    border-image: initial;
    background: #fff;
    color: # 659A22;
    text-shadow: none;
    opacity: 0;
    box-shadow: 1px 2px 4px rgba (0, 0, 0, 0.2);
    border-radius: 3px;
    transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
}
 
ul li {
    float: none;
    display: block;
    border: 0;
    line-height: 20px;  
}
ul li input [type = "radio"] {display: none; }
ul li input [type = "radio"] + label {
    font-size: 14px;
    width: 70px;
    display: list-item;
    list-style: none;
    vertical-align: baseline;
    padding: 2px 10px;
}
ul li input [type = "radio"] + label: hover, ul li input [type = "radio"]: checked + label {
    background-color: # 659A22;
    background-repeat: repeat-x;
    background-image: -webkit-linear-gradient (top, # 9AC92C, # 659A22);
    background-image: -moz-linear-gradient (top, # 9AC92C, # 659A22);
    background-image: -o-linear-gradient (top, # 9AC92C, # 659A22);
    background-image: linear-gradient (top, # 9AC92C, # 659A22);
    color: #fff;
    text-shadow: none;
}
ul li input [type = "radio"] + label: hover {
    box-shadow: inset 0 2px 4px rgba (0,0,0,0.15), 0 1px 2px rgba (0,0,0,0.05);    
}

Here is a demo in which I also added a form and js to catch its submission, which displays an alert with an action value: Demo . Accordingly, in exactly the same way, you can send several actions using checkboxes instead of radio buttons.

At the end

So what happened and what didn’t:

Happened:

• present a list of radio buttons in the form of a drop-down menu of actions
• do it without javascript in an inactive way working with regular forms

Did not work out:

• click-to-call list
• cross-browser form submission when clicking on a drop-down list item without javascript

As for the last point, I’ll clarify. I was hoping to implement submitting a form by clicking on the radio buttons without the need to catch events using javascript. More precisely, the click should have happened on the button itself, using the same method with the label , as well as the “pop-up” effect. However, this method only worked in Opera . She manages to successfully process both the click on the label attached to the radio button and the click on the label attached to the button and actually submits the form. All other browsers do an interesting thing - the button is pressed, as it were, which can be seen due to the effect on button: active , but the form is not submitted.

Actually, I don’t know what is the reason. Either these are again differences in the interpretation of the specification by browsers, or I adjusted it somewhere. If anyone has ideas, please share in the comments.

UPD: An implementation option for such control from ibnteo can be viewed here . For those who desperately need to submit a form by clicking on a list item without js, as well as expanding the list by click, but not really worried about markup, this option may well work. Thanks ibnteo.