웹솔루션개발 22년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] 크롬 브라우저의 인풋 하이라이팅 수정 css - Glowing Blue Inputs 본문

웹프로그램밍 자료실/기타 자료

[해피CGI][cgimall] 크롬 브라우저의 인풋 하이라이팅 수정 css - Glowing Blue Inputs

해피CGI윤실장 2018. 12. 10. 09:11
크롬 브라우저에서 인풋에 포커스를 했을때 파란색 테두리 부분의 디자인 변경법입니다.

 

 

 

 

input[type=text], textarea {
  @include transition(all 0.30s ease-in-out);
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}
 
input[type=text]:focus, textarea:focus {
  @include box-shadow(0 0 35px rgba(0, 0, 0, 1));
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(81, 203, 238, 1);
}



그림자의 두께, 색상, 속도를 변경가능합니다.

 

 

 

홈페이지바로가기

Comments