2012年6月25日 星期一

Dojox.mobile.RadioButton 觸控問題

發現由於 Dojo 1.7.2 預設的 Radio Button 太小 ... 導致手指觸控經常沒反應,如果大家有同樣問題,可以改寫 Radio Button 預設的 CSS ...

 



.mblRadioButton { 
  position: relative; 
  cursor: pointer; 
  outline: none; 
  -webkit-appearance: none; 
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
  margin: -0.5em 3px 0.3em 4px; 
  width: 1.7em; 
  height: 1.7em; 
  border: #9CACC0 1px outset; 
  -webkit-border-radius: 0.7em; 
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fdfdfd), to(#cecece), color-stop(0.5, #f8f8f8), color-stop(0.5, #eeeeee)); 
  font: inherit; 
  -webkit-transform: translatey(0.45em); 

.mblRadioButtonChecked::after, .mblRadioButton:checked::after { 
  position: absolute; 
  content: ""; 
  width: 0.4em; 
  height: 0.7em; 
  top: 0.3em; 
  left: 0.5em; 
  border-color: white; 
  border-width: 0.15em; 
  border-style: none solid solid none; 
  border-color: white; 
  -webkit-transform: rotate(45deg); 
  -webkit-transform-origin: 50% 50%; 



把 Radio Button 由原來 18px 增加到 30px 左右 ... 明顯地增加了觸控反應

沒有留言:

張貼留言