어떻게 적용할 수 있는 배경 이미지 텍스트 입력을 잃지 않고 기본 국경에서 파이어 폭스 및 웹 브라우저?

StackOverflow https://stackoverflow.com/questions/1100409

문제

어떤 이유로 가장 현대적인 브라우저를 중지 적용하는 기본값으로 입력된 경계선 스타일을 텍스트 상자를 제공하면 배경 이미지입니다.대신에는 삽입된 스타일입니다.에서 내가 무엇을 말할 수 없 CSS 방법을 적용하는 기본 브라우저 스타일이다.

IE8 지 않는 이 문제를 가지고 있습니다.Chrome2Firefox3.5 하고 나는 가정이 다른 브라우저뿐만 아니라.내가 온라인으로 읽는 IE7 가 동일한 문제이지만,해당 게시물이 없는 솔루션입니다.

예를 들어 다음과 같습니다.

<html>
<head>
  <style>
    .pictureInput {
      background-image: url(http://storage.conduit.com/images/searchengines/search_icon.gif);
      background-position: 0 1px;
      background-repeat: no-repeat;
    }
  </style>
<body>
  <input type="text" class="pictureInput" />
  <br />
  <br />
  <input type="text">
</body>
</html>

크롬에서 2 개의 그림으로 보면 다음과 같습니다. http://www.screencast.com/users/jadeonly/folders/Snagit/media/d4ee9819-c92a-4bc2-b84e-e3a4ed6843b6

고 Firefox3.5: http://www.screencast.com/users/jadeonly/folders/Snagit/media/d70dd690-9273-45fb-9893-14b38202ddcc

업데이트:JS 솔루션: 나는 여전히 희망을 찾을 순수한 CSS-on-the-입력한 솔루션이지만,여기에는 해결 방법을 사용 하겠다.참고로 이것은 붙여의 내용도 없이 좋은,대 혼자서 예는 다음과 같다.가 포함되어 있는 관련 부품의 큰 웹 응용 프로그램입니다.할 수 있어야 합 아이디어를 얻을 수 있습니다.HTML 입력으로"링크"를 클래스입니다.큰 수직 위치를 배경 때문에 그것은 sprite.에서 테스트 IE6,IE7,IE8,FF2,FF3.5,오페라 9.6,오페라 10,Chrome2,Safari4.I 을 조정하는 데 필요한 배경의 위치 몇 픽셀의 일부 브라우저에서 여전히:

JS:

 $$('input.link').each(function(el) {
   new Element('span',{'class':'linkIcon'}).setText(' ').injectBefore(el);
   if (window.gecko) el.setStyle('padding', '2px 2px 2px 19px');
 });

CSS:

input.link { padding-left: 19px; }
span.linkIcon { z-index: 2; width: 19px; height: 19px; position: absolute; background-image: url(img/fields.gif); background-position: 1px -179px; background-repeat: no-repeat; }

업데이트:CSS 충분히 가까이 솔루션: 반에서 제안서 kRON 여기 CSS 를 입력 경기 FF 고 즉 비스타에 있는 좋은 선택을 줄 경우에는 순수한 기본값을 적용 하나는 스타일입니다.나는 수정한 자신의 약간 추가하고"파란"효과:

CSS:

input[type=text], select, textarea {
    border-top: 1px #acaeb4 solid;
    border-left: 1px #dde1e7 solid;
    border-right: 1px #dde1e7 solid;
    border-bottom: 1px #e3e9ef solid;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    padding: 2px;
}
input[type=text]:hover, select:hover, textarea:hover, input[type=text]:focus, select:focus, textarea:focus {
    border-top: 1px #5794bf solid;
    border-left: 1px #c5daed solid;
    border-right: 1px #b7d5ea solid;
    border-bottom: 1px #c7e2f1 solid;
}
select { border: 1px; }
도움이 되었습니까?

해결책

을 변경할 때는 국경이나 배경에 텍스트 입력을 그들로 돌아가 아주 기본적인 업그레이드해야 할 수 있습니다.텍스트 입력 os 스타일은 일반적으로 오버레이(과 같은 플래시)는 렌더링에서 최고의 문서입니다.

내가 믿지 않는 순수한 CSS 수정하는 문제입니다.할 수 있는 최고의 일-내 생각하는 것입니다-선택한 스타일 당신이 좋아하는 에뮬레이션 CSS.그래서 어떤 브라우저에 입력 같은 것으로 보입니다.당신은 여전히 수 있는 효과를 가져와 같습니다.OS X 타 광선 효과는 까다로울 수 있지만 나는 확신 할 수 있습니다.

@알렉스 모랄레스:귀하의 솔루션이 중복되어 있습니다.국경:0;은 무시되의 국경:1px solid#abadb3;결과에서 불필요한 전송 바이트에서 와이어입니다.

다른 팁

이것은 기본값을 다시 살펴볼 수있는 CSS입니다.

input, select, textarea {
    border-top: 1px #acaeb4 solid;
    border-left: 1px #dde1e7 solid;
    border-right: 1px #dde1e7 solid;
    border-bottom: 2px #f1f4f7 solid;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
}

당신은 또한 신청할 수 있습니다 :active 그리고 통제권을주십시오 푸른 일단 선택되면 색조.

업데이트!

좋아, 여기에 크로스 브라우저 호환되는 해결 방법이 있습니다. 유일한 문제는 기본 스타일이 몇 픽셀로 다르므로 약간의 조정이 필요할 수 있다는 것입니다.

<html>
    <head>
        <style>
            .pictureInput {
                text-indent: 20px;
            }
            .input-wrapper {
                position:relative;
            }
            .img-wrapper {
                position:absolute;
                top:2px;
                left:2px;
            }
        </style>
    </head>
    <body>
        <div class="input-wrapper">
            <div class="img-wrapper"><img src="http://storage.conduit.com/images/searchengines/search_icon.gif" alt="asddasd" /></div>
            <input type="text" class="pictureInput" />
        </div>
        <br />
        <br />
        <input type="text">
    </body>
</html>

절대적인 관계 위치를 사용하면 절대 DIV (이미지 포함)가 내가 알고있는 모든 브라우저 (Sub-IE6 버전을 계산하지 않음, IE6+는 괜찮습니다)가 처리 할 수있는 부모와 관련하여 절대적으로 행동 할 수 있습니다. 사용자 스케일링은 문제가 될 수 있지만 이것이 해결 방법입니다.

거꾸로, 당신은 입력의 스타일을 전혀 변경할 필요가 없습니다 (텍스트 안정을 제외하고는 어쨌든 그렇게 할 것입니다).

단점은 가장 예쁜 해결 방법이 아닙니다.

오래된!

나는 이것이 당신이 원하는 것이 아니라는 것을 알고 있지만, 최소한 모든 입력 테두리를 일관되게 만들기 위해 이와 같은 일을 할 수 있습니다.

input {
    border-color:#aaa;
    border-width:1px;
}

example image

나는 모든 브라우저에서 그것을 시도하지 않았지만, 당신이 테두리 스타일을 설정하지 않기 때문에, 기본 스타일을 사용할 수 있지만 다른 크기를 사용할 수 있습니다 (건너 뛸 수는 있지만). 열쇠는 모든 입력 필드가 동일한 경계 색상을 사용하고 나머지를 브라우저로 남겨 두도록 국경을 무언가로 설정하는 것입니다.

나는 텍스트 배경 이미지를 가지고 있었고 이것은 또한 나를 짜증나게했다. 그래서 나는 친척을 넣었습니다u003Cdiv> 라운드u003Cinput> 그런 다음 이미지를 절대적으로 배치했습니다u003Cinput> .

물론 이미지를 클릭 한 경우 이미지를 숨기거나 이미지의 가장자리 주위를 클릭하여 초점을 맞추면 이미지를 숨기려면 조금 더 JavaScript가 필요했습니다.

약간의 피를 흘리면서 IE8, Firefox, Chrome 및 Opera에서 꽤 좋아 보였지만 끔찍한 Kludge이며 브라우저가 수정하면 좋을 것입니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top