<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .condition input { display: inline-block; vertical-align: middle; /* 當成為行內塊元素時它就可以垂直居中了 */ width: 20px; height: 20px; -webkit-appearance: none; /* 清除原有的樣式 */ background-color: transparent; border: 0; outline: 0 !important; /* 去掉點擊后外面可能會出現的藍框 */ line-height: 20px; color: #d8d8d8; } .condition input:after { /* //在input的內容之后插入新內容 */ content: ""; display: block; width: 20px; height: 20px; border-radius: 50%; text-align: center; line-height: 14px; font-size: 16px; color: #fff; border: 3px solid #ddd; background-color: #fff; box-sizing: border-box; /* 規定兩個並排的帶邊框的框 */ } .condition input:checked:after { /* 選中之后的樣子 */ content: "L"; transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0); /* 2D變換旋轉，還有平移和縮放，平時旋轉用rotate，這個寫法是比較復雜一點的寫法， 括號里面的六個值來得矩陣，實現2D變換，更詳細的大家去百度查。 */ -webkit-transform: matrix(-0.766044, -0.642788, -0.642788, 0.766044, 0, 0); border-color: #099414; background-color: #099414; } </style> </head> <body> <div class="condition"> <input name="sex" type="radio"> <input name="sex" type="radio"> </div> </body> </html>