locked
Ho to create checkbox like advertising facebook : box wih icon + test + description CSS RRS feed

  • Question

  • User1991482975 posted

    Hi,

    i have some simple checkbox but i would love to know if anybody is able to reproduce the faceebook advertising CSS checkbox :

    My checkboxes :

    <div class="form-group">
                @Html.LabelFor(model => model.PartnerAdvertiseActive, new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.PartnerAdvertiseActive)
                    @Html.ValidationMessageFor(model => model.PartnerAdvertiseActive)
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.PartnerAdvertiseActiveName, new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.PartnerAdvertiseActiveName)
                    @Html.ValidationMessageFor(model => model.PartnerAdvertiseActiveName)
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.PartnerAdvertiseActiveTel, new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.PartnerAdvertiseActiveTel)
                    @Html.ValidationMessageFor(model => model.PartnerAdvertiseActiveTel)
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.PartnerAdvertiseActiveSex, new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.PartnerAdvertiseActiveSex)
                    @Html.ValidationMessageFor(model => model.PartnerAdvertiseActiveSex)
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.PartnerAdvertiseActivePro, new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.PartnerAdvertiseActivePro)
                    @Html.ValidationMessageFor(model => model.PartnerAdvertiseActivePro)
                </div>
            </div>
    
            <div class="form-group">
                @Html.LabelFor(model => model.PartnerAdvertiseActiveBirthdate, new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.EditorFor(model => model.PartnerAdvertiseActiveBirthdate)
                    @Html.ValidationMessageFor(model => model.PartnerAdvertiseActiveBirthdate)
                </div>
            </div>

    the results i should have :

    A box, with inside an icon + text + descrition

    if we clikc the bordre became blue and the background of the div become red(or other color)

    help please!

    Monday, November 30, 2020 11:11 AM

Answers

  • User1686398519 posted

    Hi grafic.web, 

    You can use bootstrap and open iconic to achieve your needs.I wrote an example, you can refer to it.

    1. You need to download the open iconic from this link.
    2. You need to copy open-iconic-bootstrap.min.css (under open-iconic-master\font\css) from the downloaded file to the Content directory of the project.
    3. You need to copy the fonts folder (under the open-iconic-master\font) from the downloaded file to the root directory of the project
    4. if we clikc the bordre became blue and the background of the div become red(or other color)
      • You can write js code to achieve this requirement.
    5. Note: Here is the link that can help you.
    @{
        ViewBag.Title = "Home Page";
        Layout = null;
    }
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/open-iconic-bootstrap.css" rel="stylesheet" />
    <style>
        .oi {
            width: 60px;
            height: 60px;
            font-size: 180%;
            border-radius: 50%;
            text-align: center;
            line-height: 60px;
            vertical-align: middle;
            display: inline-block;
            background: #D3D3D3;
            margin-top: 10%;
        }
    </style>
    <div class="row">
        <div class="col-md-2 mb-4">
            <div class="card shadow-lg">
                <div class="text-center card-img-top">
                    <span class="oi oi-align-center" title="icon name" aria-hidden="true"></span>
                </div>
                <div class="card-body">
                    <h5 class="card-title text-center">Card title</h5>
                    <p class="card-text text-center">Go</p>
                </div>
            </div>
        </div>
        @*the code here is the same as the code marked with the color above, so it is omitted. *@ </div> <script src="~/Scripts/jquery-3.5.1.min.js"></script> <script src="~/Scripts/bootstrap.min.js"></script> <script> $(document).on("click", ".card", function () { $(this).css("background-color", "red"); $(this).css("border-color", "blue"); }); </script>

    Here is the result. 

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 1, 2020 8:36 AM

All replies

  • User1686398519 posted

    Hi grafic.web, 

    You can use bootstrap and open iconic to achieve your needs.I wrote an example, you can refer to it.

    1. You need to download the open iconic from this link.
    2. You need to copy open-iconic-bootstrap.min.css (under open-iconic-master\font\css) from the downloaded file to the Content directory of the project.
    3. You need to copy the fonts folder (under the open-iconic-master\font) from the downloaded file to the root directory of the project
    4. if we clikc the bordre became blue and the background of the div become red(or other color)
      • You can write js code to achieve this requirement.
    5. Note: Here is the link that can help you.
    @{
        ViewBag.Title = "Home Page";
        Layout = null;
    }
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/open-iconic-bootstrap.css" rel="stylesheet" />
    <style>
        .oi {
            width: 60px;
            height: 60px;
            font-size: 180%;
            border-radius: 50%;
            text-align: center;
            line-height: 60px;
            vertical-align: middle;
            display: inline-block;
            background: #D3D3D3;
            margin-top: 10%;
        }
    </style>
    <div class="row">
        <div class="col-md-2 mb-4">
            <div class="card shadow-lg">
                <div class="text-center card-img-top">
                    <span class="oi oi-align-center" title="icon name" aria-hidden="true"></span>
                </div>
                <div class="card-body">
                    <h5 class="card-title text-center">Card title</h5>
                    <p class="card-text text-center">Go</p>
                </div>
            </div>
        </div>
        @*the code here is the same as the code marked with the color above, so it is omitted. *@ </div> <script src="~/Scripts/jquery-3.5.1.min.js"></script> <script src="~/Scripts/bootstrap.min.js"></script> <script> $(document).on("click", ".card", function () { $(this).css("background-color", "red"); $(this).css("border-color", "blue"); }); </script>

    Here is the result. 

    Best Regards,

    YihuiSun

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, December 1, 2020 8:36 AM
  • User1991482975 posted

    Thank YihuiSun!!

    I have another post here :

    https://forums.asp.net/t/2172651.aspx?jquery+ho+to+set+my+hidden+field+to+true+when+checkbox+checked

    The problem is that with my jqeryscript i can set the value to true or false of the checkbox input but i do not now how to apply the same thing in my hidden input...

    could you help?

    Tuesday, December 1, 2020 8:52 AM