Make Mona toggle button a button input rather than a riced checkbox.

src/General/css/style.css

@@ -1247,30 +1247,23 @@ input[name="Default Volume"] {
 #qr.forced-anon input[data-name="sub"]:not(.force-show),
 #qr.reply-to-thread input[data-name="sub"]:not(.force-show),
 #qr.reply-to-thread select[name="filetag"],
-body:not(.board_jp) #sjis-toggle,
-#sjis-toggle > input {
+body:not(.board_jp) #sjis-toggle {
   display: none;
 }
 #sjis-toggle {
+  -webkit-flex: 0 0 23px;
+  flex: 0 0 23px;
   -webkit-align-self: stretch;
   align-self: stretch;
-  width: 20px;
   border: 1px solid #BBB;
-  background-color: #DCDCDC;
-  color: #000;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-align-items: center;
-  align-items: center;
-}
-#sjis-toggle::after {
-  content: "∀";
-  margin: auto;
-}
-#qr:not(.sjis-preview) #sjis-toggle {
+  padding: 0;
   background: linear-gradient(to bottom, #F8F8F8, #DCDCDC) no-repeat;
+  color: #000;
 }
-#sjis-toggle, #qr.sjis-preview textarea {
+#qr.sjis-preview #sjis-toggle {
+  background: #DCDCDC;
+}
+#sjis-toggle, #qr.sjis-preview textarea.field {
   font-family: "IPAMonaPGothic","Mona","MS PGothic",monospace;
   font-size: 16px;
   line-height: 17px;

src/General/css/tomorrow.css

@@ -87,8 +87,7 @@
 :root.tomorrow .qr-preview {
   background-color: rgba(255, 255, 255, .15);
 }
-:root.tomorrow #qr .field,
-:root.tomorrow #qr #sjis-toggle {
+:root.tomorrow #qr .field {
   background-color: rgb(26, 27, 29);
   color: rgb(197,200,198);
   border-color: rgb(40, 41, 42);
@@ -98,8 +97,20 @@
   border-color: rgb(129, 162, 190) !important;
   background-color: rgb(30,32,36);
 }
-:root.tomorrow #qr:not(.sjis-preview) #sjis-toggle {
+:root.tomorrow #sjis-toggle {
   background: linear-gradient(to bottom, #2E3035, #222427) no-repeat;
+  color: rgb(197,200,198);
+  border-color: rgb(40, 41, 42);
+  outline: none;
+}
+:root.tomorrow #sjis-toggle::-moz-focus-inner {
+  border: none;
+}
+:root.tomorrow #sjis-toggle:focus {
+  border-color: rgb(129, 162, 190);
+}
+:root.tomorrow #qr.sjis-preview #sjis-toggle {
+  background: rgb(26, 27, 29);
 }
 :root.tomorrow #qr select,
 :root.tomorrow #file-n-submit > input {

src/General/html/Features/QuickReply.html

@@ -10,7 +10,7 @@
 </div>
 <form>
   <div class="persona">
-    <label id="sjis-toggle" title="Toggle Mona font"><input name="sjisPreview" type="checkbox"></label>
+    <input type="button" id="sjis-toggle" title="Toggle Mona font" value="∀">
     <input name="name" data-name="name" list="list-name" placeholder="Name" class="field" size="1">
     <input name="email" data-name="email" list="list-email" placeholder="Options" class="field" size="1">
     <input name="sub" data-name="sub" list="list-sub" placeholder="Subject" class="field" size="1">

src/Posting/QR.coffee

@@ -184,6 +184,12 @@ QR =
     else
       QR.unhide()
 
+  toggleSJIS: (e) ->
+    e.preventDefault()
+    Conf['sjisPreview'] = !Conf['sjisPreview']
+    $.set 'sjisPreview', Conf['sjisPreview']
+    QR.nodes.el.classList.toggle 'sjis-preview', Conf['sjisPreview']
+
   setCustomCooldown: (enabled) ->
     Conf['customCooldownEnabled'] = enabled
     QR.cooldown.customCooldown = enabled
@@ -445,7 +451,7 @@ QR =
     setNode 'dumpButton',    '#dump-button'
     setNode 'pasteArea',     '#paste-area'
     setNode 'urlButton',     '#url-button'
-    setNode 'sjisToggle',    '#sjis-toggle > input'
+    setNode 'sjisToggle',    '#sjis-toggle'
     setNode 'name',          '[data-name=name]'
     setNode 'email',         '[data-name=email]'
     setNode 'sub',           '[data-name=sub]'
@@ -500,7 +506,6 @@ QR =
       nodes.spoiler.parentElement.hidden = true
 
     if g.BOARD.ID is 'jp' and Conf['sjisPreview']
-      nodes.sjisToggle.checked = true
       $.addClass QR.nodes.el, 'sjis-preview'
 
     if parseInt(Conf['customCooldown'], 10) > 0
@@ -539,8 +544,7 @@ QR =
     $.on nodes.fileRM,     'click',  -> QR.selected.rmFile()
     $.on nodes.spoiler,    'change', -> QR.selected.nodes.spoiler.click()
     $.on nodes.fileInput,  'change', QR.handleFiles
-    $.on nodes.sjisToggle, 'change', $.cb.checked
-    $.on nodes.sjisToggle, 'change', -> nodes.el.classList.toggle 'sjis-preview', @checked
+    $.on nodes.sjisToggle, 'click',  QR.toggleSJIS
     $.on nodes.customCooldown, 'click', QR.toggleCustomCooldown
 
     window.addEventListener 'focus', QR.focus, true