jQM 1.4 thumb on right

by Erik Zanker

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<div data-role="page">
    <div data-role="header">
         <h1>My page</h1> 
    </div>
    <div data-role="content">
<ul data-role="listview"  data-inset="true"  data-filter="true" data-filter-placeholder="Search" data-split-icon="delete"  style="margin-top: 40px;" class="RTLListUL"  > 

 <li class="RTLList" > <img src="http://demos.jquerymobile.com/1.4.0/_assets/img/album-bb.jpg" /> element 1 </li>
    <li class="RTLList" > <img src="http://demos.jquerymobile.com/1.4.0/_assets/img/album-bb.jpg" /> element 2 </li>
    <li class="RTLList" > <img src="http://demos.jquerymobile.com/1.4.0/_assets/img/album-bb.jpg" /> element 3 </li>
    
</ul>        
    </div>

</div>

CSS

.ui-listview>.ui-li-static.ui-li-has-thumb {
    padding-left: 1em;
    padding-right: 6.25em;
}
.ui-listview .ui-li-has-thumb>img:first-child {
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
}
.ui-listview>li.ui-first-child img:first-child:not(.ui-li-icon){
    border-top-left-radius: 0;
}
.ui-listview>li.ui-last-child img:first-child:not(.ui-li-icon){
    border-bottom-left-radius: 0;
}