checkbox或checkboxlist控制項在預設情況下，核取方塊大小是固定的，如果在電腦上操作還好，但要是使用手機，那個核取方塊實在太小了!不方便使用。
在國外網站上找到外國友人分享的方法，經過自己測試了不少時間，才知道該寫在哪？寫程式真是一條不歸路啊！
以下圖說：
首先在網頁加入一個「checkboxlist」控制項，並編輯好項目。
這是網頁開啟的畫面，注意核取方塊的大小。
接下來，看上圖的編號:
1.
先切換到「原始檔」，我們要編輯「html」。
2.
找到「head」標籤。
3.
在<head>與</head>中間夾進<style></style>。
接下來就是重點了，如圖輸入「input」相關標籤碼。一個一個解釋:
「input」是html5裡的標籤，有許多形式(type)，其中一個就是「checkbox」。神奇的是，這裡並沒有「checkboxlist」，但只要用到「checkbox」即可套用到「checkboxlist」。
Input之後要指定「type」，這裡要處理的是「checkbox」核取方塊，所以「type=”checkbox”」。接下來是設定核取方塊的寬與高，最好兩個數值一樣，例如同樣指定為30px。此外，也可以不指定寬、高，改以「zoom」，寫法是「zoom: 1.5;」，寫在{}之間。
「cursor」很有趣，是移動滑鼠到核取方塊時，顯現的指標圖形，可以在打標籤時，打到「:」出現選項時，一個一個試。個人覺得「all-scroll」最有趣。
最後那一行，是指呈現在瀏覽器上的樣子，例如寫成「-webkit-appearance:button」，就會以按鈕的樣子呈現。而各家瀏覽器對這一行解讀出來的樣子或多或少有些出入。我試著改後面的參數，在ie裡並沒有變化，似乎目前看來並沒有多大作用。這一行刪除掉並不會影響執行結果。
這是執行結果，核取方塊真的變大了！
注意input的type只有checkbox，沒有checkboxlist，別亂寫哦!
不信的話，試著改看看，無論是改成checkboxlist…
或是自己亂取個名稱…
結果都是不理你…
此外，是寫成type=”checkbox”還是type=checkbox，結果是沒影響的。
這是type=checkbox執行的結果，跟type=”checkbox”一樣。
補充說明:(2017/08/21)
經過測試，「-webkit-appearance : none;」這一行，在執行時，google chrome瀏覽器的核取方塊顯示為空白，解決方法是把這一行改成如下:
這樣修改後，在google chrome裡也能正常顯示了。補充說明:(2017/08/21)
經過測試，「-webkit-appearance : none;」這一行，在執行時，google chrome瀏覽器的核取方塊顯示為空白，解決方法是把這一行改成如下:
-webkit-appearance : checkbox;
沒有留言:
張貼留言