Jquery Mobile - Customized split button listview

This JQM examples shows how you can customize a split button listview by removing the separator line and increasing the size of the default icon.

by sebababi

HTML

<div data-role="header">
    <h3>Customized split listview</h3>
</div>
<div data-role="content">
    <ul data-role="listview" data-split-icon="star" data-split-theme="c">
        <li>
            <a href="">Spatial Unlimited</a>
            <a href=""></a>
        </li>

    </ul>
</div>

CSS

.ui-li-link-alt{
    border-left-width: 0px !important;
    width: 47px !important;
    height: 100% !important;
}

.ui-btn-icon-notext .ui-btn-inner{
    height: 100% !important;
}

.ui-btn-icon-notext {
    width: 30px;
    height: 30px;
}

.ui-li-link-alt .ui-btn{
    top: 44% !important;
}

.ui-icon-star {
    background-position: -467px 50% !important;
}

.ui-icon {
    width: 20px;
    height: 20px;
}

.ui-li-link-alt .ui-btn-icon-notext .ui-btn-inner .ui-icon {
    top: 47% !important;
}

.ui-li-link-alt .ui-btn .ui-icon {
    right: 46% !important;
}

.ui-li .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li {
    padding: 1em 15px !important;
}

/* Get rid of the annoying outer circle on listview alt links */
.ui-li-link-alt span.ui-btn-corner-all {
  border-style: hidden;
  -webkit-box-shadow: none;
  /* Additional browser-specific box-shadow CSS should go here */
  background: transparent;
  }