用 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", "background-color: #dff6ff;background-image: url(../img/public/select_bg.png);background-size: 100% 100%;background-repeat: no-repeat;");
}
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");
});