javascript/html / 다크곰 / 2011. 1. 13. 17:13
style="border:none" 도 가능하다.
하지만 안되는 곳에서는
style="border:none;border-right:0px;border-top:0px;boder-left:0px;boder-bottom:0px;"
위와 같이 스타일을 주면 테두리가 없어진다.
저작자표시
'javascript > html' 카테고리의 다른 글
| 2011.01.14 |
| 2011.01.14 |
| 2011.01.13 |
태그css, html, input box, Style, 없애기, 테두리
javascript/html 관련 글
- input box 숫자만 입력 받기 FF, IE 동작
2011.01.14
-
input box 한글 입력 ime-mode
2011.01.14
글 더보기
0
댓글을 달아 주세요
비공개
댓글을 남겨주세요
">
- «
- 1
- ···
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- ···
- 161
- »
이번 글은 JSP Input 태그의 Text Type에 대해 3가지를 알아볼려 합니다.
프로젝트마다 틀리겠지만 진행하게 될 때
많이 쓰는 태그 중 하나인 input 태그는 다양한 type을 가지고 있습니다.
그 중 text type을 생성하는 방법과, 기본 테두리 제거 하는 방법
마지막으로 input 태그의 입력창을 클릭하게 되면 텍스트 커서가 이동하게 되는데
이때 테두리가 검게 되는 스타일이 나오게 됩니다.
이를 제거하는 방법을 알아보도록 하겠습니다.
전체 목록
1. Input 태그 text type 생성하는 방법
css로 크기 좀 주기 위해서 클래스를 지정해주었고,
실제로 사용하실때는 type 만 text로 사용하시면 됩니다.
See the Pen [CSS] input text type 생성 by wpfhorez4 (@wpfhorez4) on CodePen.
2. input 태그 테두리 제거
기본 바탕색도 흰색이여서 input 테두리를 제거하니 안보여
기본 body에 색상을 주었습니다.
See the Pen [CSS] input text type 생성 by wpfhorez4 (@wpfhorez4) on CodePen.
3. input 태그 클릭 시 테두리 제거
See the Pen [CSS] input text type 클릭 시 테두리 제거 by wpfhorez4 (@wpfhorez4) on CodePen.
728x90
300x250
input 클릭시
아래와 같이 테두리 색상변경하는 방법입니다.
html
<div class="form-item"> <input type="text" id="inpName" placeholder="이름을 입력하세요"> <label for="inpName">이름</label> </div>input을 클릭했을때 효과를 주기 위해서는 포커스를 받은 요소를 표현하는 :focus 의사클래스를 사용해서 표현할 수 있습니다.
.form-item input:focus{ border-color:#0982f0; outline: none; }:fuocus는 포커스를 받은 요소 자체에만 해당하기 때문에 자식 영역이 포커스를 받은 경우에는 :focus-within을 사용합니다.
See the Pen Untitled by kim oya (@ttuttu) on CodePen.
:fuocus 브라우저 호환성
728x90
반응형
저작자표시비영리변경금지
'Front-end > HTML' 카테고리의 다른 글
| 2021.12.03 |
| 2021.12.01 |
| 2021.11.27 |
| 2021.11.26 |
| 2021.11.25 |
| 2021.11.22 |