Introduction:

In this article I will explain to you design Required field mark in textbox using css or design stylish registration form with example.

Description:

In the following below example i have designed stylish registration form and with marking required field.

Step-1: write the following below html code for design registration form.

index.cshtml

@{

    ViewBag.Title = "Index";

    Layout = "~/Views/Shared/_Layout.cshtml";

}

<div class="container">

    <form role="form" style="width:400px; margin: 0 auto;">

        <h1>Registration Form</h1>        

        <div class="required-field-block">

            <input type="text" placeholder="First Name" class="form-control">

            <div class="required-icon">

                <div class="text">*</div>

            </div>

        </div>

        <div class="required-field-block">

            <input type="text" placeholder="Middle Name" class="form-control">

            <div class="required-icon">

                <div class="text">*</div>

            </div>

        </div>

        <div class="required-field-block">

            <input type="text" placeholder="Last Name" class="form-control">

            <div class="required-icon">

                <div class="text">*</div>

            </div>

        </div>        

        <div class="required-field-block">

            <input type="text" placeholder="Email" class="form-control">

            <div class="required-icon">

                <div class="text">*</div>

            </div>

        </div>

        <input type="text" placeholder="Phone" class="form-control"> 

        <div class="required-field-block">

            <textarea rows="3" class="form-control" placeholder="Address"></textarea>

            <div class="required-icon">

                <div class="text">*</div>

            </div>

        </div>        

        <button class="btn btn-primary">Submit</button>

    </form>

</div>



<script>

    $(function () {

        $('.required-icon').tooltip({

            placement: 'left',

            title: 'Required field'

        });

    });



</script>

Step-2: write the following below css code for apply style on your registration form.

Style.css

input, textarea, button { margin-top:10px }



/* Required field START */



.required-field-block {

    position: relative;   

}



.required-field-block .required-icon {

    display: inline-block;

    vertical-align: middle;

    margin: -0.25em 0.25em 0em;

    background-color: #E8E8E8;

    border-color: #E8E8E8;

    padding: 0.5em 0.8em;

    color: rgba(0, 0, 0, 0.65);

    text-transform: uppercase;

    font-weight: normal;

    border-radius: 0.325em;

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    -ms-box-sizing: border-box;

    box-sizing: border-box;

    -webkit-transition: background 0.1s linear;

    -moz-transition: background 0.1s linear;

    transition: background 0.1s linear;

    font-size: 75%;

}

	

.required-field-block .required-icon {

    background-color: transparent;

    position: absolute;

    top: 0em;

    right: 0em;

    z-index: 10;

    margin: 0em;

    width: 30px;

    height: 30px;

    padding: 0em;

    text-align: center;

    -webkit-transition: color 0.2s ease;

    -moz-transition: color 0.2s ease;

    transition: color 0.2s ease;

}



.required-field-block .required-icon:after {

    position: absolute;

    content: "";

    right: 1px;

    top: 1px;

    z-index: -1;

    width: 0em;

    height: 0em;

    border-top: 0em solid transparent;

    border-right: 30px solid transparent;

    border-bottom: 30px solid transparent;

    border-left: 0em solid transparent;

    border-right-color: inherit;

    -webkit-transition: border-color 0.2s ease;

    -moz-transition: border-color 0.2s ease;

    transition: border-color 0.2s ease;

}



.required-field-block .required-icon .text {

 color: #B80000;

 font-size: 26px;

 margin: -3px 0 0 12px;

}



.form-control {

    display: block;

    width: 100%;

    padding: .375rem .75rem;

    font-size: 1rem;

    line-height: 1.5;

    color: #495057;

    background-color: #fff;

    background-clip: padding-box;

    border: 1px solid #0581fd;

    border-radius: .25rem;

    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;

}



/* Required field END */

Now Press F5 and see output:

thanks for reading my article.