728x90
반응형
-- 모바일이나 웹에서 테두리가 생긴다면...
아웃라인만 없애주면 된다.
input:focus{ outline:none; }그런데 모바일에서는 하이라이트생기는 경우가 있다.
IOS(아이폰,,아이패드 등..), Android 등의 웹킷 기반 브라우저(크롬, 사파리 등)에서 화면을 터치하면
해당위치에 파란박스 영역이 생긴다. (하이라이트)
이를 없애기 위해서는
-webkit-tap-highlight-color : 컬러;를 사용해 색을 지정한다.
없애고 싶다면
rgba(0,0,0,0) 으로 투명하게 설정하거나 transparent로 투명하게 만들어준다.
웹표준은 아니라 브라우저마다 다르게 적용될수 있다고 한다......
자세한 사항은 아래에서 확인할 수 있다.
//developer.mozilla.org/en-US/docs/Web/CSS/-webkit-tap-highlight-color
-webkit-tap-highlight-color
-webkit-tap-highlight-color is a non-standard CSS property that sets the color of the highlight that appears over a link while it's being tapped. The highlighting indicates to the user that their tap is being successfully recognized, and indicates which el
developer.mozilla.org
728x90
반응형
저작자표시
'CSS > CSS 기초' 카테고리의 다른 글
| 2019.05.15 |
| 2019.05.15 |
| 2019.04.25 |
| 2019.04.24 |
| 2019.04.22 |
if(".select_text > option[value='nochoice']") 표현법은 잘못되었습니다. 이것을 아래와 같이 수정해 사용하는게 맞습니다.
if ($(event.currentTarget).children("option[value='nochoice']:selected").length) { }하지만 click 이벤트에서는 이것 조차도 문제가 발생합니다. click은 무조건 클릭시에 이벤트가 발생하기에 첫번째 항목이 선택된 상태에서 클릭을 하는 것은 결국 위의 조건문에서는 항상 true를 반환합니다. 그래서 어떤 항목을 선택했던 적색 테두리를 만들 것입니다.
select는 click 보다는 change 이벤트 타입을 적용하도록 합니다.
html은 첫번째 option은 값을 비워놓도록 하고 selected 속성을 명시적으로 정의하지 않아도 됩니다. (어차피 첫번째 항목을 기본적으로 선택해 주므로)
이벤트 발생후 값을 체크해 값이 비워져 있으며 테두리를 적색으로 처리하고 그렇지 않으면 필요에 따라 정의하면 됩니다.
그리고 기본적으로 outline이 생기므로 사용자가 인지하기가 어려으므로 마지막으로 outline 속성을 'none'으로 지정합니다.
다음 아래는 수정된 코드입니다.
$(function() { $(".select_text").on('change', function(event) { var value = $(this).children("option:selected").attr("value"); if (!value) { $(this).css("border", "1px solid red"); } else { $(this).css("border", "1px solid #e4e5e7"); } $(this).css("outline", "none"); }); })- 프로그래밍
- 2020-05-19 22:30:53
- 프로그래밍
- By 최찬희
크롬에서 input, textarea, button 클릭 시 생기는 파란색 테두리 없애는 방법
개발을 하다보면 input이나 textarea에 클릭하여 focus하면 파란색 테두리가 생겨 보기 싫은 디자인 구성이 되는 경우가 발생합니다.
원인은 크롬브라우저에서 발생 하는데, 접근성에 대한 크롬의 정책으로 보면 될 것 같습니다.
input 이나 textarea에 포커싱을 하게 되면 outline 이 입혀져 파란색 테두리가 보입니다.
이것을 없애는 방법으로는 css 디자인으로 핸들링하여 없애줄 수 있습니다.
css에서 outline: none; 속성을 적용하여 input, textarea, button 등 파란색 테두리를 없앨 수 있습니다.
- input:focus {
- outline: none;
- }
- textarea:focus {
- outline: none;
- }
* 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있음
소셜 공유하기
WrapUp 블로거
최찬희
반려견을 좋아하고, 차를 좋아하고, 여행을 좋아하고, 맛집을 찾아 즐기는 웹 개발자 입니다^^
작성자의 다른 포스팅
Published 2021. 2. 3. 23:08
Frontend/css
728x90
div나 기타 버튼을 클릭할때
주황색 또는 특정 색 테두리가 생기는 경우가 있는데
테두리를 없애는 방법은 CSS에 다음 하단의 스타일을 추가해주면 테두리가 생기지 않는다.
*:focus { outline:none; }적용 전 : 클릭 시 테두리가 진해져있음
적용 후 : 클릭해도 테두리 포커스가 생기지 않음
출처 : m.blog.naver.com/javaking75/220082250256
728x90
저작자표시비영리동일조건
'Frontend > css' 카테고리의 다른 글
| 2021.11.06 |
| 2021.04.05 |
chrome, Focus, 버튼, 클릭시 테두리, 테두리, 테두리 제거, 포커스
Name
Password
Homepage
비밀글
이전 글 추천
[생활코딩] 8강. Form
2021.01.24
다음 글 추천
[Git - 기본 소개] 1. 버전관리란? / Git, SourceTree설치 (Windows)
2021.02.15
1 ··· 43 44 45 46 47 48 49 50 51 ··· 82