diff --git a/cps/static/css/style.css b/cps/static/css/style.css
index dad0d1d2..8b299002 100644
--- a/cps/static/css/style.css
+++ b/cps/static/css/style.css
@@ -21,8 +21,7 @@ a{color: #45b29d}a:hover{color: #444;}
 .container-fluid .book .meta .author{font-size:12px;color:#999}
 .container-fluid .book .meta .rating{margin-top:5px}.rating .glyphicon-star{color:#999}.rating .glyphicon-star.good{color:#45b29d}
 .navbar-brand{font-family: 'Grand Hotel', cursive; font-size: 35px; color: #45b29d !important;}
-.more-stuff{margin-top: 20px; padding-top: 20px;border-top: 1px solid #ccc}
-
+.more-stuff{margin-top: 20px; padding-top: 20px; border-top: 1px solid #ccc}
 .more-stuff>li{margin-bottom: 10px;}
 .navbar-collapse.in .navbar-nav{margin: 0;}
 span.glyphicon.glyphicon-tags {padding-right: 5px;color: #999;vertical-align: text-top;}
@@ -31,6 +30,7 @@ span.glyphicon.glyphicon-tags {padding-right: 5px;color: #999;vertical-align: te
 .book-meta .identifiers a {display: inline;}
 .container-fluid .single .cover img {
     border: 1px solid #fff;
+    /*border-radius: 7px;*/
     box-sizeing: border-box;
     -webkit-box-shadow: 0 5px 8px -6px #777;
     -moz-box-shadow: 0 5px 8px -6px #777;
@@ -52,4 +52,4 @@ span.glyphicon.glyphicon-tags {padding-right: 5px;color: #999;vertical-align: te
 .spinner {margin:0 41%;}
 .spinner2 {margin:0 41%;}
 
-
+.block-label {display: block;}
diff --git a/cps/templates/detail.html b/cps/templates/detail.html
index 85a51804..14389809 100644
--- a/cps/templates/detail.html
+++ b/cps/templates/detail.html
@@ -160,10 +160,12 @@
       {% endif %}
       {% if not g.user.is_anonymous() %}
       <p>
-        <div class="custom_columns" id="have_read_container">
-          <form id="have_read_form" action="{{ url_for('toggle_read', book_id=entry.id)}}" method="POST") >
-            <input id="have_read_cb" type="checkbox" {% if have_read %}checked{% endif %} >
-            <label for="have_read_cb">{{_('Read')}}</label>
+        <div class="custom_columns">
+          <form id="have_read_form" action="{{ url_for('toggle_read', book_id=entry.id)}}" method="POST">
+            <label class="block-label">
+              <input id="have_read_cb" type="checkbox" {% if have_read %}checked{% endif %} >
+              <span>{{_('Read')}}</span>
+            </label>
           </form>
         </div>
       </p>
@@ -236,28 +238,10 @@
 <script src="{{ url_for('static', filename='js/libs/jquery.form.js') }}"></script>
 <script>
   $( document ).ready(function() {
-    var haveReadForm = $('#have_read_form');
-    haveReadForm.ajaxForm();
+    $('#have_read_form').ajaxForm();
   });
-  $("#have_read_container").attr('unselectable','on')
-     .css({'-moz-user-select':'-moz-none',
-           '-moz-user-select':'none',
-           '-o-user-select':'none',
-           '-khtml-user-select':'none', /* you could also put this in a class */
-           '-webkit-user-select':'none',/* and add the CSS class here instead */
-           '-ms-user-select':'none',
-           'user-select':'none'
-     }).bind('selectstart', function(){ return false; });
-  $("#have_read_container").click(function() {
-    var haveReadForm = $('#have_read_form');
-    if ($("#have_read").find('span').hasClass('glyphicon-ok')) {
-      $("#have_read").find('span').removeClass('glyphicon-ok');
-      $("#have_read").find('span').addClass('glyphicon-remove');
-    } else {
-      $("#have_read").find('span').removeClass('glyphicon-remove');
-      $("#have_read").find('span').addClass('glyphicon-ok');
-    }
-    haveReadForm.submit()
+  $("#have_read_cb").on('change', function() {
+    $(this).closest('form').submit();
   });
 </script>
 {% endblock %}