[ios] iOS 입력 그림자 제거

Program / 글쓴이

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 속성 선택기에 대해 자세히 알아 보려면 여기에서 매우 유익한 기사를 찾을 수 있습니다.

http://css-tricks.com/attribute-selectors/

답변

background-clip: padding-box;

그림자도 제거하는 것 같습니다.

으로 @davidpauljunior 언급; -webkit-appearance일반 입력 선택기 설정 에 주의하십시오 .

답변

웹킷은 모든 속성을 제거합니다 

-webkit-appearance: none;

입력 요소의 그림자를 제거하려면 box-shadow 속성을 사용해보십시오.

box-shadow: none !important;

답변

나는 a.) 작동 하고 b.) 작동하는 이유를 이해할 수 있는 해결책을 찾으려고 노력했다 .

입력의 그림자 (및 입력 [type = “search”]의 둥근 테두리)는 배경 이미지에서 비롯된 것입니다.

그래서 분명히 설정 background-image: none은 나의 첫 번째 시도 였지만 이것은 작동하지 않는 것 같습니다.

설정이 background-image: url()작동하지만 여전히 빈 url(). 현재로서는 기분이 좋지 않습니다.

background-clip: padding-box; 일을 잘하는 것 같지만 “background-clip”문서를 읽은 후에도 왜 이것이 배경을 완전히 제거하는지 이해하지 못합니다.

내가 가장 좋아하는 솔루션 :

background-image: linear-gradient(transparent, transparent);

이것은 유효한 CSS이며 어떻게 작동하는지 이해합니다.

답변

허용 대답하는 동안 다른 사람들이 지적한 것처럼, 그것은 단지 그 입력에 대해 작동하는 좋은 시작 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;
}

답변

이것은 나를 위해 더 잘 작동합니다. 또한 모든 다른 유형의 입력 (예 : 텍스트, 전화, 이메일 등)에 적용 할 필요가 없음을 의미합니다.

* {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

답변