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

간단하지만, 유용한 input 버튼 css 입니다. 기본 시스템 input 버튼이 아닌 디자인을 하기 위한 기본적인 소스이며, 간단한 css와 javascript로 구현이 가능합니다. 별도의 프로그램 작업없이도 디자이너가 사용이 가능합니다.

- 라이센스 MIT - 사용 방법 1. 파일 상단에 Jquery 라이브러리와 numeric.js 파일을 링크합니다. 2. 숫자를 입력할 input 태그를 추가하고 numeric 함수를 호출합니다. 3. negative 옵션을 설정하면 숫자 앞에 마이너스(-)를 표기할 수 있습니다. - 작동 예제 negative 옵션에 따른 입력 예제입니다. 소수점까지 입력이 가능합니다. ​

css 와 js 로 파일업로드 인풋박스 디자인을 변경하는 소스입니다. 기존의 인풋박스를 투명하게 처리하고 해당 부분에 버튼을 올려 디자인합니다. 스크립트를 이용하여 파일주소를 출력합니다. css @import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'); body{ background:#f1f1f1; } .container{ width:400px; padding:50px 20px; background:#fff; } h1{ margin-bottom: 40px;; } .file-upload { position: relative; overflow: hidden; border-radius: 3px !important; ..

inputmask는 INPUT 박스에 정보 입력시 지정된 형식으로만 입력이 가능하도록 도와줍니다. - 라이센스 MIT - 사용 방법 1. 사용할 페이지 상단에 jQuery 라이브버리와 inputmask 라이브러리 링크를 걸어줍니다. 2. input 박스를 추가하고 data-inputmask 속성을 사용하여 형식을 입력해 줍니다. 3. inputmask 플러그인을 호출합니다. 4. 세부 옵션은 아래 페이지를 통해 확인 가능합니다. https://www.jqueryscript.net/form/Easy-jQuery-Input-Mask-Plugin-inputmask.html - 결과물

크롬 브라우저에서 인풋에 포커스를 했을때 파란색 테두리 부분의 디자인 변경법입니다. 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); } ..

인풋박스를 클릭하여 값을 입력할 떄 생기는 테두리를 없앨 수 있는 CSS소스를 알려드립니다. focus를 활용하여 테두리를 지울 수 있습니다. input 박스를 클릭 했을떄 나오는 테두리 색상 변경하기 input:focus {outline:2px solid #d50000;} input 박스를 클릭 했을떄 나오는 테두리 색상 없애기 input:focus {outline:none;}

모바일에서 보다 편리하게 값을 입력하기 위한 코딩으로, input을 어떻게 설정하냐에 따라 아이폰의 키보드 배열방식이 달라지게 됩니다. type=text type=email type=tel type=url

위와 같이 텍스트를 입력할 경우 아래처럼 회색폰트로 텍스트가 출력됩니다. 입력되는 텍스트이외에 Placeholder Text 만 색상을 변경하기 위애서와 아래와 같은 속성을 사용하여 변경이 가능합니다. input::-webkit-input-placeholder { color: green; } input:-moz-placeholder { color: green; } 위의 소스는 Firefox 4 이상, Chrome 4 이상, Safari 5 이상, Opera 11.6 및 Internet Explorer 10 이상에서 지원합니다.