Verander styl/voorkoms van Asp:CheckBox met behulp van CSS

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

  •  02-07-2019
  •  | 
  •  

Vra

Ek wil die standaard "3D" voorkoms van die standaard asp.net merkblokkie verander om soliede 1px te sê.As ek byvoorbeeld die stilering op die Border probeer toepas, doen dit net dit - trek die standaard-merkblokkie met 'n rand om dit - wat geldig is, dink ek.

In elk geval, is daar 'n manier om te verander hoe die werklike tekskassie gestileer word?

Was dit nuttig?

Oplossing

Ek dink die beste manier om boks te maak lyk regtig anders is nie te boks beheer gebruik nie. Beter gebruik jou eie beelde vir gekontroleer / ongehinderd staat on-top van hyperlink of beeld element. Cheers.

Ander wenke

Eerder as om nie-standaard beheer te gebruik, wat jy moet doen, is om onopvallende javascript te gebruik om dit agterna te doen.Sien http://code.google.com/p/jquery-checkbox/ vir 'n voorbeeld.

Die gebruik van die standaard ASP-merkblokkie vergemaklik die skryf van die kode.Jy hoef nie jou eie gebruikersbeheer te skryf nie, en al jou bestaande kode/bladsye hoef nie opgedateer te word nie.

Nog belangriker, dit is 'n standaard HTML-kontrole wat alle blaaiers kan herken.Dit is toeganklik vir alle gebruikers, en werk as hulle nie javascript het nie.Skermlesers vir blindes sal dit byvoorbeeld as 'n kontroleblokkie kan verstaan, en nie net 'n prent met 'n skakel nie.

Eenvoudigste beste manier, met behulp van die ASP boks beheer met persoonlike ontwerp. 

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

jy kan iets soos dit te gebruik .. hoop dit help

Hoekom nie gebruik Asp.net boks knoppie met ToggleButtonExtender beskikbaar by die Ajax beheer toolkit.

Nie een van die opsies nie werk goed wanneer die gebruik van ASP.NET Web Vorms en Skoenlus.

Ek het uiteindelik met behulp van Paul Sheriff se Simple bootstrap boks vir Web Vorms 

<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>

Die resultaat lyk soos volg ...
Die resultaat lyk soos hierdie

Nie seker wat dit is regtig 'n asp.net verwante vraag .. Gee dit 'n skoot, baie goeie inligting hier:

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

Hou in gedagte dat die ASP:. Boks beheer eintlik meer as net 'n enkele boks insette uitgange

Byvoorbeeld, my kode uitgange 

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

waar CheckBoxStyle is die waarde van die CssClass kenmerk van toepassing op die beheer en cbCheckBox is die ID van die beheer.

Om die insette styl, moet jy CSS skryf om te teiken 

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

plak hierdie kode in jou css en dit sal jou laat pas jou boks styl. egter, dit is nie die beste oplossing, dit is pretty much vertoon jou styl op die top van die bestaande boks / radio button. 

   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;
    }
Gelisensieer onder: CC-BY-SA met toeskrywing
Nie verbonde aan StackOverflow
scroll top