用 js 给 select input textarea 标签加上边框效果

1. html 代码

<form id="form_one">
   <label for="ykenan1">ykenan1</label><br/>
    <select id="ykenan1" name="ykenan1">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">4</option>
    </select><br/>

    <label for="ykenan2">ykenan2</label>
    <textarea id="ykenan2" name="ykenan2" placeholder="ykenan2"></textarea>
    <br/>
	
    <label for="ykenan3">ykenan3</label>
	<input id="ykenan3" type="text" name="ykenan3" />

</form>

2. js 代码

$(document).ready(function () {
    function three_d(one, label) {
        $(one + " " + label).wrap("<div></div>");
        $(one + " div").append('<span class="form_label_bottom"></span> <span class="form_label_right"></span> <span class="form_label_top"></span> <span class="form_label_left"></span>');
        $(one + " div").attr("style", "position: relative;");
        $(one + " div " + label).attr("style", "transition: background-color 0.3s ease-in-out;");
        $(one + " div span").attr("style", "position: absolute;background-color: #3cefff;transition: transform 0.5s ease;");
        var $head = $("head");
        $head.append("<style>" + one + " div .form_label_bottom, " + one + " div .form_label_top {height: 4px;left: 0;right: 0;transform: scaleX(0);}</style>")
        $head.append("<style>" + one + " div .form_label_left, " + one + " div .form_label_right {width: 4px;top: 0;bottom: 0;transform: scaleY(0);}</style>")
        $head.append("<style>" + one + " div .form_label_bottom {bottom: 0;transform-origin: bottom right;}</style>");
        $head.append("<style>" + one + " div .form_label_right {right: 0;transform-origin: top right;}</style>");
        $head.append("<style>" + one + " div .form_label_top {top: 0;transform-origin: top left;}</style>");
        $head.append("<style>" + one + " div .form_label_left {left: 0;transform-origin: bottom left;}</style>");
        $head.append('<style>' + one + ' div ' + label + ':focus { outline:none; } form label input::placeholder {color:hsla(0, 0%, 100%, 0.6);} </style>');
        $head.append('<style>' + one + ' div ' + label + ':focus ~ .form_label_bottom { transform-origin: bottom left;transform: scaleX(1); } </style>');
        $head.append('<style>' + one + ' div ' + label + ':focus ~ .form_label_right { transform-origin: bottom right;transform: scaleY(1); } </style>');
        $head.append('<style>' + one + ' div ' + label + ':focus ~ .form_label_top { transform-origin: top right;transform: scaleX(1); } </style>');
        $head.append('<style>' + one + ' div ' + label + ':focus ~ .form_label_left { transform-origin: top left;transform: scaleY(1); } </style>');
        if (label === "select") {
            // $(one + " div " + label).attr("style", "-moz-appearance:none;-webkit-appearance: none;appearance:none;padding-right: 24px;background: url('../img/select_down.png') no-repeat scroll right center #dff6ff;background-size: 24px 39px;");
            $(one + " div " + label).attr("style", "background-color: #dff6ff;background-image: url(../img/public/select_bg.png);background-size: 100% 100%;background-repeat: no-repeat;");
            // $("head").append("<style>select::-ms-expand { display: none; }</style>");
        }
        if (label === "textarea") {
            $(one + " div " + label).attr("style", "background-color: #dff6ff;");
        }
        if (label === "input") {
            $(one + " div " + label).attr("style", "background-color: #dff6ff;");
        }
    }

    three_d("form", "input");
    three_d("form", "textarea");
    three_d("form", "select");
});