iOS (Safari 5)에서 입력 요소 (상단 내부 그림자)를 따라야합니다.
상단 그림자를 제거하고 싶은데 버그 -webkit-appearance가 저장되지 않습니다.
현재 스타일은 다음과 같습니다.
input {
border-radius: 15px;
border: 1px dashed #BBB;
padding: 10px;
line-height: 20px;
text-align: center;
background: transparent;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
}
답변:
-webkit-appearance: none;기본 IOS 스타일을 재정의 하려면을 사용해야 합니다. 그러나 inputCSS 에서 태그 만 선택해도 IOS는 속성 선택기를 사용하여 스타일을 추가하기 때문에 기본 IOS 스타일을 재정의하지 않습니다 input[type=text]. 따라서 CSS는 미리 설정된 기본 IOS CSS 스타일을 재정의하기 위해 속성 선택기를 사용해야합니다.
이 시도:
input[type=text] {
/* Remove First */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
/* Then Style */
border-radius: 15px;
border: 1px dashed #BBB;
padding: 10px;
line-height: 20px;
text-align: center;
background: transparent;
outline: none;
}
유용한 링크 :
appearance여기에서 자세히 알아볼 수 있습니다 .
http://css-tricks.com/almanac/properties/a/appearance/
CSS 속성 선택기에 대해 자세히 알아 보려면 여기에서 매우 유익한 기사를 찾을 수 있습니다.
input[type=password]있습니다.
textarea, input[type="range"], input, input:matches([type="password"], [type="search"])-사용하기 만하면 모든 경우에 작동합니다.
!important받는 appearance. 또한 s에서도 appearance작동 select합니다.
background-clip: padding-box;
그림자도 제거하는 것 같습니다.
으로 @davidpauljunior 언급; -webkit-appearance일반 입력 선택기 설정 에 주의하십시오 .
background-clip: padding-box;iOS의 텍스트 입력 필드에서 그림자를 제거합니다. 예를 들어 codepen.io/jstnrs/pen/YXBLVN 을 참조하십시오 (iOS 장치에서 URL을 열어야 함).
-webkit-appearance: none;해냈습니다.
나는 a.) 작동 하고 b.) 작동하는 이유를 이해할 수 있는 해결책을 찾으려고 노력했다 .
입력의 그림자 (및 입력 [type = "search"]의 둥근 테두리)는 배경 이미지에서 비롯된 것입니다.
그래서 분명히 설정 background-image: none은 나의 첫 번째 시도 였지만 이것은 작동하지 않는 것 같습니다.
설정이 background-image: url()작동하지만 여전히 빈 url(). 현재로서는 기분이 좋지 않습니다.
background-clip: padding-box; 일을 잘하는 것 같지만 "background-clip"문서를 읽은 후에도 왜 이것이 배경을 완전히 제거하는지 이해하지 못합니다.
내가 가장 좋아하는 솔루션 :
background-image: linear-gradient(transparent, transparent);
이것은 유효한 CSS이며 어떻게 작동하는지 이해합니다.
background-clip: padding-box !important일했습니다.
background-image: linear-gradient(transparent, transparent) !important;효과가 있다면 시도해 볼 수 있습니까? 여기서 문제가 무엇인지 알게되어 기쁩니다.
허용 대답하는 동안 다른 사람들이 지적한 것처럼, 그것은 단지 그 입력에 대해 작동하는 좋은 시작 type이다 "text". iOS에서 텍스트 상자로도 렌더링되는 수많은 다른 입력 유형이 있으므로 이러한 다른 유형을 고려하여이 규칙을 확장해야합니다.
다음은 버튼, 체크 박스, 범위 슬라이더, 날짜 / 시간 드롭 다운 및 라디오 버튼에 대한 기본 스타일을 유지하면서 입력 텍스트 필드와 내부 그림자의 텍스트 영역을 제거하는 데 사용하는 CSS입니다. 모두 겸손한 <input>태그를 사용하여 제작 되었습니다. .
textarea,
input:matches(
[type="email"],
[type="number"],
[type="password"],
[type="search"],
[type="tel"],
[type="text"],
[type="url"]
) {
-webkit-appearance: none;
}
input선택기 에서 '-webkit-appearance'설정에주의해야합니다 . 라디오 버튼과 체크 박스에 원치 않는 영향을 미칠 수 있습니다.