CSS input 스타일 없애기 - CSS input seutail eobs-aegi

Question

목차 Show

Firefox에서 input number 화살표 없애는 방법
읽어보면 좋은 정보
input 태그 외곽선 없애기
input 태그 외곽선 없애기
outline 속성 사용 방법
해결방법
개발/HTML5 카테고리와 연관된 콘텐츠

input {
border:none; border-right:0px; border-top:0px; boder-left:0px; boder-bottom:0px; /* 테두리 없애기 */
outline:none; select-dummy: expression(this.hideFocus=true); /* 링크 점선없애기 */
}

</style>

select box와 input box의 스타일을 잡기 위해선 스타일을 초기화 시켜 주는게 좋다.
특히 Mac은 Windows와 다르게 select box의 경우 스타일을 초기화 하지 않으면 원하는 CSS 를 입힐 수 없다.

다음 코드를 참고하여 원하는 속성을 사용하면 된다.
속성은 찾는 대로 계속 추가해 나갈 예정.

/* input 기본 스타일 초기화 */
input {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

/* IE10 이상에서 input box 에 추가된 지우기 버튼 제거 */
input::-ms-clear { display: none; }

/* input type number 에서 화살표 제거 */
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

/* Select box 스타일 초기화 */ 
select {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

/* IE 에서 Select box 화살표 제거 */ 
select::-ms-expand { display: none; }

Firefox에서 input number 화살표 없애는 방법

Firefox에서는 조금 다른 방법을 써야한다.

input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

input[type='number'] {
    -moz-appearance: textfield;
}

-moz-appearance: textfield; 라는 속성을 추가해 input number의 외형을 텍스트필드로 바꿔줘야한다.

외형(appearance)에 관한 정보는 이 글을 읽어보면 도움이 된다.

읽어보면 좋은 정보

[WEBDIR] 폼 필드(input type=”text”) 디자인 #1
[WEBDIR] 폼 필드(select 박스) 디자인 #2
[WEBDIR] 폼필드(체크박스, 라디오) 디자인 #3
[WEBDIR] 폼 필드(input type=”file”) 디자인 #4

2021-02-21

IE에서 비밀번호 보이기/숨기기 눈 없애기

input[type='password']::-ms-reveal,
input[type='password']::-ms-clear {
    display: none;
}

CSS

input 태그 외곽선 없애기

input 태그가 활성화되면 파란색 외곽선이 표시됩니다.
다음과 같이요.

위와 같이 파란색 외곽선을 없애는 방법에 대해 알아보겠습니다.

outline를 사용하여 이 외곽선을 없앨 수 있습니다.

outline 속성 사용 방법

선택자{outline:none}

다음은 outline을 적용하지 않은 input 태그입니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS의 outline속성 미적용</title>
</head>
<body>
    <input type="text" value="input tag" />
</body>
</html>

결과는 바로 아래에서 확인할 수 있습니다.

위 코드의 결과

다음은 outline을 사용하여 input태그의 외곽선을 제거한 예제입니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS의 outline속성 적용</title>
<style>
input{outline:none}
</style>
</head>
<body>
    <input type="text" value="input tag" />
</body>
</html>

결과는 바로 아래에서 확인할 수 있습니다.

위 코드의 결과

input 태그가 활성화된 상태에서도 외곽선이 표시되지 않습니다.
참고로 이 외곽선은 border속성과 무관하므로 border:none를 사용해도 없어지지 않아요.

남양주개발자

·

2020. 10. 25. 08:00

Input 태그 하이라이트 없애기 (How to remove the border highlight on an input)

HTML 태그 중 input 태그를 사용하다 보면 현재 사용자가 어떤 input 태그를 사용하고 있는지 활성화시켜주기 위해 강조해주는 하이라이팅 효과가 생기게 됩니다. 보통 하늘색 네모난 박스의 하이라이팅이 표시되죠. 하지만 해당하는 효과를 커스터마이징하기 위해 하이라이팅 효과를 제거해야될 경우가 생기게 됩니다.