DEVINFO 데빈포 그누보드 포럼 쉽게 찾는 그누보드 실전 정보
BOARD

팁·활용

BOARD 팁·활용

그누보드 입력폼 포커스 테두리 및 그림자 효과 제거 방법

페이지 정보

profile_image
작성자 최고관리자
댓글 0건 조회 3회 작성일 26-10-12 17:11

본문

그누보드 입력폼 포커스 테두리 및 그림자 효과 제거 방법

그누보드 5.3 및 아미나 빌더 환경에서 input과 textarea 입력폼을 클릭할 때 나타나는 파란색 포커스 테두리와 그림자 효과를 CSS로 깔끔하게 제거하고 수정하는 방법을 안내합니다.

그누보드 5.3 입력폼 포커스 테두리 및 그림자 제거 방법

그누보드 5.3 원본 기준 환경에서 input 또는 textarea 입력폼을 클릭할 때 나타나는 파란색 테두리와 그림자 효과를 제거하려면 CSS 코드를 수정해야 합니다.

1. 클릭 시 포커스 테두리 및 효과 수정

기본 CSS 파일에서 아래와 같이 코드를 수정하거나 삭제합니다.

  • 포커스 효과 기본 설정 수정input[type=text], input[type=password], textarea 대상에 outline: none;을 적용하고 다음과 같이 변경합니다.
    input[type=text], input[type=password], textarea, select {
border: 1px solid #ccc!important;
outline: none;
}
  • 포커스 시 그림자 및 테두리 설정 삭제 또는 변경기존에 지정된 :focus 상태의 box-shadow와 파란색 테두리 코드를 삭제합니다.
    input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {
-webkit-box-shadow: 0 0 5px #9ed4ff;
-moz-box-shadow: 0 0 5px #9ed4ff;
box-shadow: 0 0 5px #9ed4ff;
border: 1px solid #558ab7!important;
}
    만약 다른 CSS 파일의 영향으로 삭제해도 효과가 사라지지 않는다면 위 코드를 삭제한 후 아래 코드를 추가합니다.
    input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {
-webkit-box-shadow: none!important;
box-shadow: none!important;
border: 1px solid #ccc!important;
}

2. 기본 입력폼 그림자 효과 제거

내부 그림자 속성이 지정된 아래 코드를 찾아 빨간색(또는 해당) 박스 그림자 속성(box-shadow) 부분을 삭제합니다.

.wr_content textarea,.tbl_frm01 textarea,.form_01 textarea,.frm_input {
 border: 1px solid #ccc;
 background: #fff;
 color: #000;
 vertical-align: middle;
 border-radius: 3px;
 padding: 5px;
 -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0,.075);
 -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0,.075);
 box-shadow: inset 0 1px 1px rgba(0, 0, 0,.075);
}

3. 적용 후 확인

코드를 수정하고 저장한 뒤에는 웹브라우저 캐시를 삭제하고 새로고침하여 변경 사항이 정상적으로 반영되었는지 확인합니다.

아미나 빌더 환경에서 입력폼 클릭 시 나타나는 파란색 포커스 테두리와 그림자 효과를 제거하려면 css/default.css 파일을 수정해야 합니다. 해당 파일에 아래의 CSS 코드를 추가하여 스타일을 재정의하십시오.

1. 그림자 효과 제거

css/default.css 파일에 다음 코드를 추가합니다.

input, textarea, select {
 -webkit-box-shadow: none!important;
 box-shadow: none!important;
}

2. 클릭 시 포커스 효과(테두리) 제거

다음 코드를 추가하여 포커스 상태의 테두리 스타일을 변경합니다.

input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {
 -webkit-box-shadow: none!important;
 box-shadow: none!important;
 border: 1px solid #ccc!important;
}

3. 적용 확인

수정 후에는 반드시 웹브라우저 캐시를 삭제하고 새로고침하여 변경 사항이 정상적으로 반영되었는지 확인하시기 바랍니다.

그누보드 입력폼 포커스 테두리 및 그림자 효과 제거 방법

다른 CSS 파일의 영향이나 우선순위 충돌로 인해 기본 코드를 수정해도 포커스 테두리나 그림자가 사라지지 않을 때는 !important 속성을 강제로 적용하거나 box-shadow: none!important 처리를 추가하여 해결할 수 있습니다.

1. 우선순위 충돌 시 해결 방법

  • 다른 CSS 값 때문에 우선순위에서 밀릴 때는 강제 적용을 위해 !important를 포함한 속성을 사용합니다.
  • 브라우저 개발자 도구를 통해 실제로 어떤 값이 적용되고 있는지 먼저 확인한 뒤 아래와 같이 코드를 보완합니다.
input[type=text]:focus, input[type=password]:focus, textarea:focus, select:focus {
 -webkit-box-shadow: none!important;
 box-shadow: none!important;
 border: 1px solid #ccc!important;
}

또는 아웃라인(외곽선) 속성을 강제로 제거하려면 아래 코드를 적용합니다.

input, textarea:focus {
 outline: none!important;
}

2. 다음 행동

  • 코드를 수정하고 저장한 뒤에는 웹브라우저 캐시를 삭제하고 새로고침하여 적용 상태를 확인하십시오. 만약 여전히 반영되지 않는다면 Q4의 캐시 및 경로 확인 절차를 진행하시기 바랍니다.

참고자료

기타 참고자료

댓글목록

등록된 댓글이 없습니다.