input type 의 placeholder/checkbox css꾸미기

로그인 창을 직접 디자인하여 퍼블까지 해보았습니다.

먼저 html 코드입니다.

 

<div class="wrap">
        <div class="container">
            <!-- LOGIN 화면 시작 -->
            <div class="content">
                <div class="content-login">
                    <h1>로그인</h1>
                    <form method="post" id="loginForm" action="">
                        <!-- <input type="hidden" name="redirectUrl" value=""> -->
                        <fieldset>
                          <div class="inp-text-wrap">
                            <div class="inp-text">
                              <label for="loginId" class="screen-out">아이디</label>
                              <input type="text" id="loginId" name="loginId" placeholder="아이디를 입력하세요" >
                            </div>
                            <!-- input의 id 값과 lable의 for값은 같아야한다. -->
                            <div class="inp-text">
                              <label for="loginPw" class="screen-out">비밀번호</label>
                              <input type="password" id="loginPw" name="password" placeholder="비밀번호를 입력하세요" >
                            </div>
                          </div>
                            <div class="inp-chk"> <!-- 체크시 checked 추가 -->
                                <input type="checkbox" id="keepLogin" class="inp-chk"  name="keepLogin">
                                <label for="keepLogin" class="lab-g">
                                    <span class="img-top ico_check"></span>
                                    <span class="txt-lab">로그인 상태 유지</span>
                                </label>
                            </div>
                          <button type="submit" class="btn-login"  disabled>로그인</button>
                          <div class="login-append">
                            <div class="txt-find">
                              <a href="#" class="link-find">회원가입</a>
                              <!-- 회원가입 -->
                               <a href="#" class="link-find">아이디 찾기</a>
                               <!-- 아이디 찾기 -->
                               <a href="#" class="link-find">비밀번호 찾기</a>
                               <!-- 비밀번호 찾기 -->
                             </div>
                          </div>
                          
                        </fieldset>
                      </form>
                      
                </div>
            </div>
            <!-- LOGIN 화면 끝 -->
            
            
        </div>
    </div>

 

먼저 placeholder 의 css 방법입니다.

 

.content-login input::placeholder{
    color: #ACACAC;
    font-family: NotoSans-m;
}

 

input의 checkbox css 입니다!

생각보다 복잡합니다.

input[type="checkbox"]{ /*실제 체크박스는 숨김*/
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip:rect(0,0,0,0);
    border: 0
}
.content-login input[type="checkbox"] + label {
    display: inline-block;
    position: relative;
    cursor: pointer;
}
.content-login input[type="checkbox"] + label:before {/* 가짜 체크박스 */
    content: '';
    display: inline-block;
    width: 20px;  /* 체크박스의 너비를 지정 */
    height: 20px;  /* 체크박스의 높이를 지정 */
    line-height: 20px; /* 세로정렬을 위해 높이값과 일치 */
    margin: -2px 8px 0 0;
    text-align: center; 
    vertical-align: middle;
    border: 2px solid #ACACAC;
    border-radius : 4px;
}
.content-login input[type="checkbox"] + label:active:before,
.content-login input[type="checkbox"]:checked + label:active:before {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}
  /* 체크박스를 체크했을때 */
  .content-login input[type="checkbox"]:checked + label:before{   
    content: '\2714';  /* 체크표시 유니코드 사용 */
    color: #99a1a7;
    text-shadow: 1px 1px #fff;
    background: #e9ecee;
    border-color: #adb8c0;
    box-shadow: 0px 1px 2px rgba(0,0,0,0.05), 
    inset 0px -15px 10px -12px rgba(0,0,0,0.05), 
    inset 15px 10px -12px rgba(255,255,255,0.1);
}
.content-login .screen-out{
    position: absolute; /*레이아웃에 영향을 주지 않게 영역을 없앤다.*/
    width: 1px;
    height: 1px; /*width, height값을 최소한의 크기로 조절한다.*/
    margin: -1px; /*화면상 아예 안나오게 한다.*/
    overflow: hidden; /*overflow된 콘텐츠를 숨긴다.*/
    clip-path: polygon(0 0, 0 0, 0 0); /*클리핑 범위를 모두 0으로 지정해서 숨긴다.*/
}