使用@Html.TextBoxFor()的ASP.NET MVC5中的浮动标签

@model YourModel

<div class="form-group">
    @Html.LabelFor(m => m.YourProperty)
    @Html.TextBoxFor(m => m.YourProperty, new { @class = "form-control", placeholder = "Enter your value" })
    @Html.ValidationMessageFor(m => m.YourProperty)
</div>

<style>
    .form-group {
        position: relative;
        margin-bottom: 20px;
    }

    .form-control {
        padding: 10px;
        font-size: 14px;
        border: 1px solid #ccc;
        border-radius: 4px;
        width: 100%;
    }

    .form-control:focus {
        border-color: #66afe9;
        outline: 0;
        box-shadow: 0 0 5px rgba(102, 175, 233, 0.5);
    }

    .form-control-placeholder {
        position: absolute;
        top: 10px;
        left: 10px;
        pointer-events: none;
        color: #999;
    }

    .form-control:focus + .form-control-placeholder,
    .form-control:not(:placeholder-shown) + .form-control-placeholder {
        font-size: 12px;
        transform: translateY(-25px);
        visibility: visible !important;
    }
</style>

<script>
    $(document).ready(function () {
        $('.form-control').on('input', function () {
            var $input = $(this);
            if ($input.val()) {
                $input.addClass('not-empty');
            } else {
                $input.removeClass('not-empty');
            }
        });
    });
</script>