iPhone의 입력란에 회색 선이 표시됩니다.

입력란에 이상한 회색 선이 있지만 아이폰에서만 입력이 있습니다. 모바일이 아닌 브라우저에서는 단색의 흰색 입력입니다. 나는 안드로이드가 없어서 iPhone 만 테스트 할 수 없습니다. 입력을 완전히 흰색으로 만드는 모든 솔루션?iPhone의 입력란에 회색 선이 표시됩니다.

Input Grey Line Image

HTML :

<input class="bt-email" type="email" name="email" placeholder="enter email address"> 
<input class="bt-submit" type="submit" value="let's get moving!">

CSS :

.bt-email { 
    color: #1795db; 
    display: inline-block; 
    margin: 0 auto; 
    height: 30px; 
    font-family: 'Lato', serif; 
    font-weight: 300; 
    padding-left: 15px; 
    text-decoration: none solid rgb(56, 64, 71); 
    width: 90%; 
    background: #ffffff; 
    border: 4px solid #ffffff; 
    border-radius: 5px 5px 5px 5px; 
} 
.bt-email:focus { 
    outline: #ffffff; 
} 
.bt-submit { 
    color: #ffffff; 
    display: inline-block; 
    margin: 0 auto; 
    height: 40px; 
    font-family: 'Lato', serif; 
    font-weight: 300; 
    text-decoration: none solid rgb(56, 64, 71); 
    width: 90%; 
    padding-top: 4px; 
    background: #fb7f2d; 
    border: 1px solid #fb7f2d; 
    border-radius: 5px 5px 5px 5px; 
}

출처

2014-04-20 Ryan Salmons

CSS

?를 Android 나 다른 브라우저를 사용해 보셨습니까? 브라우저 크기를 조정하고 복제 할 수 있는지 확인하십시오. Chrome의 dev 도구에서 에뮬레이터를 사용하여 다양한 장치로 복제하려고 시도했을 수 있습니다. – Idris

실제로 모든 장치에서 Chrome 에뮬레이터의 회색 선이 표시되지 않습니다. 그러나, 그것은 실제 아이폰에 표시됩니다. 몇 명의 친구가 이것을 확인하도록했습니다. 불행히도 –

하면 4 픽셀 경계를 제거 시도하고 단지 기존의 PA에 추가하여 대신

padding:4px;

를 추가 dding

출처

2014-04-20 00:40:43 tylerlindell

은 문제를 해결하지 못합니다. –

나는 실제로 내가 찾고있는 답을 찾지 못했습니다. 모바일 Safari는 입력 내용에 내부 텍스트 그림자를 추가합니다. 이 코드는 그것을 해결 : 만 아이폰에

-webkit-appearance: none;

iPhone의 입력란에 회색 선이 표시됩니다.

답변

관련 문제