텍스트 입력의 내부 그림자 제거

텍스트 입력의 내부 그림자 제거

---

그래서 나는 크롬에서 html5를 사용하는 텍스트 입력이 있고 텍스트 입력의 모양을 변경하고 싶습니다. 초점의 윤곽선을 제거했습니다 (크롬의 주황색), 배경을 밝은 색상으로 설정 #f1f1f1했지만 지금은 위쪽과 왼쪽에 더 두꺼운 테두리가 있습니다. 밀어 넣은 것처럼 보이지만 배경색에 변화가 없을 때 이런 일이 발생하지 않습니다. 어떻게 제거합니까? 죄송합니다. 휴대 기기에서 사진을 제공 할 수 없습니다.

크롬, 즉 Firefox에서 발생하며 다른 사람을 테스트 할 수 없습니다.

---

border-style:solid;inset스타일 을 재정의합니다 . 당신이 요청한 것입니다.

border:none 테두리가 모두 제거됩니다.

border-width:1px 배경이 변경되기 전과 비슷하게 설정됩니다.

border:1px solid #cccccc 더 구체적이고 너비, 스타일 및 색상의 세 가지를 모두 적용합니다.

예 : https://jsbin.com/quleh/2/edit?html,output

---

이것은 모바일 사파리를위한 솔루션입니다.

-웹킷 외관 : 없음;

여기에 제안 된대로 : 모바일 Safari (iPhone)에서 텍스트 영역 내부 그림자 제거

---

현재 작동하는 솔루션이 없습니다. 여기 내 해결책이 있습니다. 접두사를 추가 할 수 있습니다.

box-shadow: inset 0px 0px 0px 0px red;

---

테두리를 추가 border: none하거나 border: 0제거하거나 border: 1px solid #ccc테두리를 얇고 평평하게 만듭니다.

Firefox에서 고스트 패딩을 제거하려면 다음을 사용할 수 있습니다 ::-moz-focus-inner.

::-moz-focus-inner {
    border: 0;
    padding: 0;
}

라이브 데모를 참조하십시오 .

---

border: 1px solid black모든면을 동일하게 만들고 모든 종류의 사용자 정의 테두리 (단색 제외)를 제거하도록 설정 합니다. 또한 box-shadow: none적용된 그림자를 제거하도록 설정 하십시오.

---

이 시도
outline: none;

라이브 데모 https://codepen.io/wenpingguo/pen/KQgbXq

---

나는 firefox에서 일하고 있습니다. 동일한 문제가 발생했습니다. 입력 유형 텍스트가 자동으로 정의됩니다. boxshadow 인셋처럼 보이지만 그렇지 않습니다. 변경하려는 것은 테두리입니다. 설정 만하면 border:0;됩니다.

참고 URL : https://stackoverflow.com/questions/12791631/remove-inner-shadow-of-text-input