CSS ile Checkbox’ lara Stil Verme (Kod + Video)

CSS ile Checkbox’ lara Stil Verme (Kod + Video)

[ad_1]

CSS ile Checkbox’ lara Stil Verme (Kod + Video)


HTML ile oluşturulmuş formlar ve form elemanlarının göze hitap etmesi için CSS ile ufak dokunuşlar yapabiliriz. Bu örnekte HTML sayfasına eklemiş olduğumuz checkbox kontrollerini CSS ile biçimlendireceğiz.

Örnekte bitişik kardeş seçiciler ve Font Awesome kullanılmıştır. Kodlara ve örneğin yapılış videosuna yazının devamında ulaşabilirsiniz.

Örneğe ait ekran görüntüsü:

 

HTML +CSS Kodları:

<!doctype html>
<html>
<head>
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<meta charset="utf-8">
<title>Untitled Document</title>
    <style>
        body{
            background: #B5ED92;
        }
        form{/*phpsitesi.com*/
            width: 400px;
            margin: auto;
            background: #006A0F;
            color: #FFF;
            border-radius: 15px;
            padding: 40px;
            margin-top: 50px;
        }
        input[type=checkbox]+label{
            display: block;
            margin: 5px;
        }
        input[type=checkbox]{
            display: none;
        }
        input[type=checkbox]+label::before{
            font-family: FontAwesome;
            content:"f00c";/*phpsitesi.com*/
            border: 2px solid mediumseagreen;
            border-radius: 5px;
            display: inline-block;
            width: 1em;
            height: 1em;padding: 2px;
            margin-right: 3px;
            color: transparent;/*phpsitesi.com*/
        }
        input[type=checkbox]:checked+label::before{
            background: mediumseagreen;
            color: #FFF;/*phpsitesi.com*/
            transition: 0.3s;
        }
    </style>
</head>

<body>
    <form action="action.php" method="post">
        <p>Seçim Yapın : </p>
        <input type="checkbox" name="lng1" id="lng1" value="csharp">
        <label for="lng1">C#</label>
        <input type="checkbox" name="lng2" id="lng2" value="cplus">
        <label for="lng2">C++</label>
        <input type="checkbox" name="lng3" id="lng3" value="python">
        <label for="lng3">Python</label>
        <input type="checkbox" name="lng4" id="lng4" value="java">
        <label for="lng4">Java</label>
        <input type="checkbox" name="lng5" id="lng5" value="ruby">
        <label for="lng5">Ruby</label>
    </form>
</body>
</html>

 

CSS Checkbox Biçimlendirme Video:


CSS ile Checkbox’ lara Stil Verme (Kod + Video)

[ad_2]
Daha Fazla Css Eğitim Dersleri İçin Css Eğitim Kategorisini İnceleyiniz…
#CSS #ile #Checkbox #lara #Stil #Verme #Kod #Video

Van Web Tasarım

İlk yorum yapan olun

Bir yanıt bırakın

E-posta hesabınız yayımlanmayacak.


*