• <ol id="gebcs"></ol>
    <track id="gebcs"><i id="gebcs"></i></track>

    CSS生成實心圓環及表單單選按鈕美化

    時間:2021-07-04 09:02:24 類型:HTML/CSS
    字號:    

    頁面上的實心圓圈, 一種方法我們可以用圖片, 那同時也可以直接用CSS直接生成, 

    效果圖:

    1.jpg

    方式如下:

    <div class="circle"></div>
    .circle{
    	box-sizing: border-box;
    	background-clip: content-box;
    	background-color: green;
    	border: 2px solid green;
    	width: 18px;
    	height: 18px;
    	padding:4px;	
    	border-radius: 50%;
    }

    表單應用實例:

    2.jpg

    <form class="form">
    			  <li class="input-box">
    			  	   <div class="fl sex">
    						<input type="radio" name="sex" value="男" checked>
    						<em><i></i>先生</em>
    			  	   </div>
    			  	   <div class="fl sex">
    						<input type="radio" name="sex" value="女">
    						<em><i></i>女士</em>
    			  	   </div>
    				   
    			  </li>
    		</form>
    *{
        paging:0; margin:0;box-sizing: border-box;font-size: 14px;}
        li{list-style: none;}
        .fl{float: left;}
        .form{width: 500px; margin:50px auto;
    }
    .sex{
        width: 50px;
        margin:30px;
        position: relative;
        color: #999;
        line-height: 40px;
    }
    .sex input[type="radio"]{
        position: absolute;
        width: 100%;
        height: 100%;
        display: block;
        z-index: 1;
        cursor: pointer;
        -khtml-opacity: 0;
        -moz-opacity: 0;
        filter: alpha(opacity=0);
        filter: "alpha(opacity=0)";
        opacity: 0;
    }
    .sex em{
        position: relative;
        display: block;
        padding-left: 22px;
    }
    .sex em i{
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 2px solid #ccc;
        padding: 4px;
        display: block;
        left: 0;
        top: 11px;
        position: absolute;
        box-sizing: border-box;
        }
    .sex input[type='radio']:checked+em i{
        background-clip: content-box;
        background-color: #0079FE;
        border: 2px solid #0079FE;
    }


    黄片基地 <