PPTING

로그인 1) CSS Input Text examples 본문

html & css & javascript

로그인 1) CSS Input Text examples

PPTING 2023. 9. 4. 16:18

Input Text design

 

간단하고 심플한 input 디자인 입니다. 

See the Pen Untitled by areum (@areumingg) on CodePen.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .input-group.text {
            display: inline-flex;
            margin-bottom: 20px;
        }
        .input-group.text .label {
            position: relative;
        }
        .input-group.text .label input {
            width: 300px;
            line-height: 25px;
            font-size: 15px;
            border: 2px solid #999;
            border-radius: 4px;
            padding: 5px 10px 5px 10px;
            transition: border 0.3s;
            -webkit-transition: border 0.3s;
            -moz-transition: border 0.3s;
            -o-transition: border 0.3s;
        }
        .input-group.text .label input:focus {
            border: 2px solid #628dff;
        }
        .input-group.text .label label {
            font-size: 14px;
            color: #999;
            padding-left: 2px;
            padding-right: 2px;
            transition: top 0.1s;
            position: absolute;
            left: 10px;
            top: 11px;

        }
        .input-group.text .label input:focus ~ label {
            font-size: 11px;
            top: -5px;
            background-color: #fff;
            color: #628dff;
        }
        .input-group.text.on .label input {
            border: 2px solid #000;
        }
        .input-group.text.on .label label {
            font-size: 11px;
            top: -5px;
            background-color: #fff;
            color: #000;
        }
    </style>
</head>
<body>
    <h4>Input Group - text</h4>
    <div class="input-group text">
        <div class="label">
            <input type="text" id="id" name="id">
            <label for="id">Id</label>
        </div>
    </div>
    <div class="input-group text">
        <div class="label">
            <input type="password" id="password" name="password">
            <label for="password">Password</label>
        </div>
    </div>
</body>
<script>
    (function() {
        var inputText = document.querySelectorAll('.input-group.text');
        for (var i = 0; i < inputText.length; i++) {
            inputText[i].addEventListener('focusout', function() {
                inputFocus(this);
            })
        }
    })()
    function inputFocus(elem) {
        if (elem.querySelector('input').value !== '') {
            elem.classList.add('on');
        } else {
            elem.classList.remove('on');
        }
    }
</script>
</html>
저작자표시 비영리 변경금지 (새창열림)

'html & css & javascript' 카테고리의 다른 글

로그인 2) 로그인 유효성 검사하기 CSS Input Text examples  (0) 2023.09.07
제이쿼리, 자바스크립트 없이 input radio, checkbox 수정  (0) 2023.09.04
접혔다 폈다하는 간단한 아코디언 메뉴 Accodian menu  (0) 2023.08.25
접혔다 폈다하는 아코디언 메뉴 구현  (0) 2021.03.16
'html & css & javascript' Related Articles more