"슬라이딩 도어"를 사용하여 입력 버튼 스타일 지정

변경할 수없는 제 3 자 HTML을 사용하는 웹 페이지가 있습니다. 그러나 CSS 스타일 시트를 편집 할 수는 있습니다. 페이지의 기본 입력 버튼을 바꿀 수있는 "슬라이딩 도어"스타일 버튼이 있지만 CSS 만 사용하는 방법은 알 수 없습니다. 여기 "슬라이딩 도어"를 사용하여 입력 버튼 스타일 지정

버튼의 HTML입니다 :

<div> 
    <input type="button" style="margin: 10px 0pt 0pt; width: 60px; height: 25px; font-size: 11px;" name="search_btn" value="Search" onclick="DoSearchSalesExpanded(searchform);"/> 
</div>

그리고 여기에 내가 방법 "슬라이딩 도어"를 사용하는이 기존 버튼의 CSS입니다 :

.clear { 
    /* generic container (i.e. div) for floating buttons */ 
    overflow: hidden; 
    width: 100%; 
} 
a.button_oval { 
    background: transparent url('http://mydomain.com/projects/buttons/sliding-doors/images/bg_button_oval_a.gif') no-repeat scroll top right; 
    color: #222; 
    display: block; 
    float: left; 
    font: normal 12px arial, sans-serif; 
    height: 24px; 
    margin-right: 6px; 
    padding-right: 18px; /* sliding doors padding */ 
    text-decoration: none; 
} 
a.button_oval span { 
    background: transparent url('http://mydomain.com/projects/buttons/sliding-doors/images/bg_button_oval_span.gif') no-repeat; 
    display: block; 
    line-height: 14px; 
    padding: 5px 0 5px 18px; 
} 
a.button_oval:active { 
    background-position: bottom right; 
    color: #000; 
    outline: none; /* hide dotted outline in Firefox */ 
} 
a.button_oval:active span { 
    background-position: bottom left; 
    padding: 6px 0 4px 18px; /* push text down 1px */ 
}

을

출처

2009-03-24 Anonymous

중첩 된 배경 연결 (일명 슬라이딩 도어)을 수행하려면 두 가지 요소, 즉 바깥 쪽 (배경)과 안쪽 (전경, 배경 이미지의 끝 부분 포함)이 필요합니다. 독립형 < 입력 만있는 경우> 걸려 있습니다.

언급 한 < div를 선택하는 방법을 찾을 수있는 경우 버튼을 자연색으로 제거한 내부 요소를 외부 요소로 사용할 수 있습니다. 바깥 쪽 div가 내부의 < 입력과 동일한 너비/높이인지 확인해야하지만, 아마도 왼쪽으로 떠서 (수레와 함께 제공되는 'shrink-to-fit'동작을 활성화하기 위해). 버튼의 위쪽 여백과 그 위에있는 여백을 고려해야합니다.

그러나 문제의 버튼에는 고정 픽셀 페이지 크기가 있으므로 중첩 된 배경을 전혀 사용할 필요가 없습니다. 버튼의 오른쪽 dimensons의 한 배경을 만들 수 있습니다.

출처

2009-03-24 20:52:08 bobince

다른 옵션은 일반적으로 슬라이딩 도어 버튼에 사용되는 ... 버튼 텍스트 ... 태그를 동적으로 삽입하는 것입니다. 그러나이 기능은 JS가 비활성화 된 상태에서는 작동하지 않으므로 권장하지 않습니다.

출처

2010-06-21 10:16:37 Leland

예를 들어 답을 말해야합니다. 그것은 당신의 답을 더 잘 설명하고 다른 사람들을 도울 것입니다. –

대신 입력 요소의 버튼 요소를 사용 할 수있는 경우. 다음 기사는 매우 유용합니다. 당신은 그냥 조심하는 제출로이 버튼을 사용하여에 의존하는 경우

당신은 여전히 입력처럼 입력하고 게시 유형을 사용할 수 있습니다, 그러나

을한다 IE를 사용할 때. .net 웹 응용 프로그램에 대한 보안 예외를 제공하는 버튼 내용도 제출합니다.

* 편집으로 인해 원본과 다른 링크가 발견되지 않습니다.

출처

2011-06-07 05:09:41

링크를 사용할 수 없습니다 (403 오류) – Marchy

감사합니다. 참조 용으로 다른 링크를 사용했습니다. 또한 IE 및 asp.net에 발생할 수있는 몇 가지 문제를 기록했습니다. –

"슬라이딩 도어"를 사용하여 입력 버튼 스타일 지정

답변

관련 문제