테스트 사이트 - 개발 중인 베타 버전입니다

유튜브 댓글 입력 스타일

· 8년 전 · 3036

https://jsfiddle.net/minsupkr/9w6L5bua/ jQuery

https://jsfiddle.net/minsupkr/9w6L5bua/1/ CSS


html

[code]<div>

    <label for="inp">댓글을 입력하세요</label>

    <input type="text" id="inp">

</div>[/code]


css

[code]div {position:relative}

div:after {z-index:999;position:absolute;bottom:0;left:50%;width:0;height:0;background:#333;content:'';

  -webkit-transition:all 0.2s ease-out;

  transition:all 0.2s ease-out

}

.on:after {bottom:-1px;left:0;width:100%;height:2px}

div label {position:absolute;top:0;left:0}

.on label {color:#ccc}

input {width:100%;border:0;border-bottom:1px solid #ccc;background:transparent;outline:0;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box}[/code]


javascript

[code]$(function(){

    $("input").on("focus", function(){

        $(this).closest("div").addClass("on");

    });

    $("input").on("blur", function(){

        $(this).closest("div").removeClass("on");

    });

});[/code]


유튜브 보다가 댓글란이 재밌어 보여서 빠르고 조잡하게 한번 짜봤습니다.

좀 다듬으면 쓸만하지 않을까요... ㅎㅎㅎ;;


팁자료실은 신택스하이라이트가 안 먹는군요.

@리자 @thisgun 멘션도 안 되는군요. ㅎㅎㅎ

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
3381
3380
3379
3378
3377
3376
3375
3374
3373
3372
3371
3370
3369
3368
3367
3366
3365
3364
3363
3362
3361
3360
3359
3358
3357
3356
3355
3354
3351
3350