스타일 변경/의 Asp:CheckBox CSS 사용

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

  •  02-07-2019
  •  | 
  •  

문제

내가 원하는 표준을 변경하"3D"의 모습을 표준 asp.net 란 말을 단 1px.는 경우에도 적용된 스타일링하의 국경 예를 들어,그것은 단지 않는 무 표준 checkbox 테두리 주위에는 유효한 것 같아요.

어쨌든있는 방법을 변경 방법을 실제 입는 스타일입?

도움이 되었습니까?

해결책

내가 생각하는 가장 좋은 방법을 확인란 정말 다른 사용하지 않는 것입 checkbox 컨트롤다.더 나은 자신의 이미지를 사용에 대한 확인/되지 않은 상태에서 최고의 하이퍼링크 또는 이미지 요소입니다.환호를 받았다.

다른 팁

사용하기보다 일부 표준이 아닌 제어,당신은 무엇을 해야 하는 유엔를 사용하여 돌출 javascript 그것을 할 사후에 이를 공지합니다.보 http://code.google.com/p/jquery-checkbox/ 에 대한 예입니다.

를 사용하는 표준 ASP 란 간단하게 작성합니다.당신이 쓸 필요가 없지요 자신의 사용자 정의 컨트롤과 모든 기존의 코드/페이지가 있지 않을 업데이트 할 수 있습니다.

더욱 중요한 것은 표준 HTML 제어하는 모든 브라우저는 인식 할 수 있습니다.액세스할 수 있는 모든 사용자가 사용,작동하지 않는 경우가 있었습니다.예를 들면,화면 독자들을 위한 블라인드는 것을 이해할 수 있으로는 확인란을 제어 및 다만 이미지에 대한 링크와 함께.

가장 간단한 가장 좋은 방법을 사용하여,ASP checkbox 컨트롤을 가진 주문 설계합니다.

 chkOrder.InputAttributes["class"] = "fancyCssClass";

당신은 다음과 같은 코드를 사용하면 됩니다.희망하는 데 도움이

왜 사용 Asp.net 란 버튼 ToggleButtonExtender 에서 사용할 수 있 Ajax 제어 있습니다.

위의 아무도 잘 작동할 때 사용하는 ASP.NET Web Forms 및 Bootstrap.

나는 끝까지 사용하여 바울은 보안관 간단한 스트랩 CheckBox Web Forms

<style>
    .checkbox .btn, .checkbox-inline .btn {
    padding-left: 2em;
    min-width: 8em;
    }
    .checkbox label, .checkbox-inline label {
    text-align: left;
    padding-left: 0.5em;
    }
    .checkbox input[type="checkbox"]{
        float:none;
    }
</style>


<div class="form-group">
    <div class="checkbox">
        <label class="btn btn-default">
            <asp:CheckBox ID="chk1" runat="server" Text="Required" />
        </label>
    </div>
</div>

결과는 다음과 같습니다...
The result looks like this

지는 그야말로 asp.net 관련 질문..이 많은 좋은 정보를 원하시면 여기:

http://www.456bereastreet.com/archive/200409/styling_form_controls/

유지 하는 마음에 asp:란 제어 실제로 출력 이상 단 하나의 체크 박스 입력이 있습니다.

예를 들어,내 코드 출력

<span class="CheckBoxStyle">
    <input id="ctl00_cphContent_cbCheckBox" 
           name="ctl00$cphContent$cbCheckBox"
           type="checkbox">
</span>

가 CheckBoxStyle 은 값을 가져오거나 설 특성에 적용되어과 cbCheckBox 의 ID 입니다.

스타일을 입력,를 작성해야 합 CSS 을 대상

span.CheckBox input {
  /* Styles here */
}

이 코드에서 css 로 그것은 당신의 마음에 드는 정보는 확인란 스타일입니다.그러나,그것은 최고의 솔루션,그것은 꽤 많은 표시에서 당신의 스타일 최고 기존의 체크박스/라디오 버튼.

   input[type='checkbox']:after 
{

        width: 9px;
        height: 9px;
        border-radius: 9px;
        top: -2px;
        left: -1px;
        position: relative;
        background-color: #3B8054;
        content: '';
        display: inline-block;
        visibility: visible;
        border: 3px solid #3B8054;
        transition: 0.5s ease;
        cursor: pointer;

}

input[type='checkbox']:checked:after 
    {
        background-color: #9DFF00;
    }

그들은 브라우저에 종속니다.

어쩌면 당신이 뭔가를 할 수 있는 유사한 대답에 이 에 대한 질문에 변경하는 파일의 찾아보기 버튼입니다.

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