CSS'de onay kutusunun kenarlık stili nasıl değiştirilir?

122

Onay kutusu (giriş) sınırının stilini nasıl değiştirebilirim? Ben koydum border:1px solid #1e5180ama FireFox 3.5'te hiçbir şey olmuyor!

html  css 
— Ricky
kaynak

Yanıtlar:

63

Bir şey de olursa herhangi tarayıcısı şaşırırdım. Bu, tarayıcıların stil vermenize pek izin vermediği ve insanların genellikle bir şeyi bir onay kutusu gibi görünmesi ve davranması için stil / kodlama yapabilmeleri için javascript ile değiştirmeye çalıştıkları olağanüstü form öğelerinden biridir.

— Sofya
kaynak
4
Opera , onay kutusundaki stili çok iyi kullanıyor. IE , onay kutusunun etrafını saran bazı stillere sahiptir (onay kutusunun kendisinde değil).
— korku
4
Bugünlerde aslında çirkinler: D
— Gergely Fehérvári
1
2020'de hala çirkin
— Paul
210

"Kenarlık" yerine "anahat" kullanmanızı öneririm. Örneğin: outline: 1px solid #1e5180.

— Greg
kaynak
3
Anahat harika bir alternatiftir.
— Nippysaurus
4
anahat çok iyidir ve tüm girdi ve seçim kutuları için çalışır, bu da bunu ".error" sınıfları için yararlı kılar.
— SztupY
2
!importantAnahat kullanırken css'nize eklemeniz gerekebilir . Bunu Firefox 12.0'da test ediyordum ve önemli olmadan, onay kutusunu tıkladığım sürece ana hat kaybolurdu.
— Weezle
3
Bu harika bir alternatif, ancak ana hattaki sorun, IE7'de işe yaramaması !!
— Yises
13
@Yises IE7 hakkında endişelenmeniz mi gerekiyor? Eyvah, üzgünüm.
— theblang
71

Kullanmalısın

-moz-appearance:none;
-webkit-appearance:none;
-o-appearance:none;

Ardından varsayılan onay kutusu görüntüsünden / stilinden kurtulur ve onu biçimlendirebilirsiniz. Her neyse, Firefox'ta hala bir sınır olacak

— Valerij
kaynak
2
Opera, herhangi bir ek bilgisayar korsanlığı olmadan onay kutularını biçimlendirmenize izin verir - -o-görünüm stilini bir kenara bırakırdım. -moz-görünümü ve -webkit-görünümü harika olsa da.
— Neall
7
Hata - çok erken konuşuldu: "-webkit-görünüm: yok;" onay kutusu davranışını devre dışı bırakıyor gibi görünüyor.
— Neall
6
benim için (krom 5) öyle değil, stil vermeniz gerekiyor: kontrol edilmiş durum ekstra
— Valerij
1
görünüm hiçbir zaman CSS standardının bir parçası olmamıştı. Bunu kullanma.
— Evgeny
vay bu harika eklentilerden kurtulacağım. her şeyi yapabilirim => | girdi [tür = onay kutusu] | girdi [tür = onay kutusu]: fareyle üzerine gelme | girdi [tür = onay kutusu]: işaretlendi | girdi [tür = onay kutusu]: işaretlendi: sonra ...
— h0mayun
21

Bir kenarlığı taklit etmek için kutu gölgelerini kullanabilirsiniz:

-webkit-box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
-moz-box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
box-shadow: 0px 0px 0px 1px rgba(255,0,0,1);
— Dennis Heiden
kaynak
@retrovertigo hangi versiyon?
— Dennis Heiden
Sürüm 12.0.2 (14606.3.4) / en son macOS 10.14
— retrovertigo
@retrovertigo Çözümümü test ettim ve haklısın. Cevabım daha fazla değişiklik yapılmadan Safari için çalışmıyor (-webkit-görünüm: yok gibi). 3 yıl sonra pendingfox veya Adan'ın verdiği çözümleri kullanırdım. Ancak birkaç hafta içinde cevabımı uzatmaya çalışacağım. Geri bildiriminiz için teşekkür ederiz.
— Dennis Heiden
11

İşte Martin'in CSS3 LINK ile Özel Onay Kutularını ve Radyo Düğmelerini temel alan saf bir CSS (görüntü içermeyen) çapraz tarayıcı çözümü: http://martinivanov.net/2012/12/21/imageless-custom-checkboxes-and-radio-buttons -ile-css3-revisited /

İşte bir jsFiddle: http://jsfiddle.net/DJRavine/od26wL6n/

Bunu aşağıdaki tarayıcılarda test ettim:

  • FireFox (41.0.2) (42)
  • Google Chrome (46.0.2490.80 m)
  • Opera (33.0.1990.43)
  • Internet Explorer (11.0.10240.16431 [Güncelleme Sürümleri: 11.0.22])
  • Microsoft Edge (20.10240.16384.0)
  • Safari Mobile iPhone iOS9 (601.1.46)

label,
input[type="radio"] + span,
input[type="radio"] + span::before,
label,
input[type="checkbox"] + span,
input[type="checkbox"] + span::before
{
    display: inline-block;
    vertical-align: middle;
}
 
label *,
label *
{
    cursor: pointer;
}
 
input[type="radio"],
input[type="checkbox"]
{
    opacity: 0;
    position: absolute;
}
 
input[type="radio"] + span,
input[type="checkbox"] + span
{
    font: normal 11px/14px Arial, Sans-serif;
    color: #333;
}
 
label:hover span::before,
label:hover span::before
{
    -moz-box-shadow: 0 0 2px #ccc;
    -webkit-box-shadow: 0 0 2px #ccc;
    box-shadow: 0 0 2px #ccc;
}
 
label:hover span,
label:hover span
{
    color: #000;
}
 
input[type="radio"] + span::before,
input[type="checkbox"] + span::before
{
    content: "";
    width: 12px;
    height: 12px;
    margin: 0 4px 0 0;
    border: solid 1px #a8a8a8;
    line-height: 14px;
    text-align: center;
     
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
     
    background: #f6f6f6;
    background: -moz-radial-gradient(#f6f6f6, #dfdfdf);
    background: -webkit-radial-gradient(#f6f6f6, #dfdfdf);
    background: -ms-radial-gradient(#f6f6f6, #dfdfdf);
    background: -o-radial-gradient(#f6f6f6, #dfdfdf);
    background: radial-gradient(#f6f6f6, #dfdfdf);
}
 
input[type="radio"]:checked + span::before,
input[type="checkbox"]:checked + span::before
{
    color: #666;
}
 
input[type="radio"]:disabled + span,
input[type="checkbox"]:disabled + span
{
    cursor: default;
     
    -moz-opacity: .4;
    -webkit-opacity: .4;
    opacity: .4;
}
 
input[type="checkbox"] + span::before
{
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}
 
input[type="radio"]:checked + span::before
{
    content: "\2022";
    font-size: 30px;
    margin-top: -1px;
}
 
input[type="checkbox"]:checked + span::before
{
    content: "\2714";
    font-size: 12px;
}



input[class="blue"] + span::before
{
    border: solid 1px blue;
    background: #B2DBFF;
    background: -moz-radial-gradient(#B2DBFF, #dfdfdf);
    background: -webkit-radial-gradient(#B2DBFF, #dfdfdf);
    background: -ms-radial-gradient(#B2DBFF, #dfdfdf);
    background: -o-radial-gradient(#B2DBFF, #dfdfdf);
    background: radial-gradient(#B2DBFF, #dfdfdf);
}
input[class="blue"]:checked + span::before
{
    color: darkblue;
}



input[class="red"] + span::before
{
    border: solid 1px red;
    background: #FF9593;
    background: -moz-radial-gradient(#FF9593, #dfdfdf);
    background: -webkit-radial-gradient(#FF9593, #dfdfdf);
    background: -ms-radial-gradient(#FF9593, #dfdfdf);
    background: -o-radial-gradient(#FF9593, #dfdfdf);
    background: radial-gradient(#FF9593, #dfdfdf);
}
input[class="red"]:checked + span::before
{
    color: darkred;
}
 <label><input type="radio" checked="checked" name="radios-01" /><span>checked radio button</span></label>
 <label><input type="radio" name="radios-01" /><span>unchecked radio button</span></label>
 <label><input type="radio" name="radios-01" disabled="disabled" /><span>disabled radio button</span></label>

<br/>

 <label><input type="radio" checked="checked" name="radios-02"  class="blue" /><span>checked radio button</span></label>
 <label><input type="radio" name="radios-02" class="blue" /><span>unchecked radio button</span></label>
 <label><input type="radio" name="radios-02" disabled="disabled" class="blue" /><span>disabled radio button</span></label>

<br/>

 <label><input type="radio" checked="checked" name="radios-03"  class="red" /><span>checked radio button</span></label>
 <label><input type="radio" name="radios-03" class="red" /><span>unchecked radio button</span></label>
 <label><input type="radio" name="radios-03" disabled="disabled" class="red" /><span>disabled radio button</span></label>

<br/>
 
<label><input type="checkbox" checked="checked" name="checkbox-01" /><span>selected checkbox</span></label>
<label><input type="checkbox" name="checkbox-02" /><span>unselected checkbox</span></label>
<label><input type="checkbox" name="checkbox-03" disabled="disabled" /><span>disabled checkbox</span></label>

<br/>
 
<label><input type="checkbox" checked="checked" name="checkbox-01" class="blue" /><span>selected checkbox</span></label>
<label><input type="checkbox" name="checkbox-02" class="blue" /><span>unselected checkbox</span></label>
<label><input type="checkbox" name="checkbox-03" disabled="disabled" class="blue" /><span>disabled checkbox</span></label>

<br/>
 
<label><input type="checkbox" checked="checked" name="checkbox-01" class="red" /><span>selected checkbox</span></label>
<label><input type="checkbox" name="checkbox-02" class="red" /><span>unselected checkbox</span></label>
<label><input type="checkbox" name="checkbox-03" disabled="disabled" class="red" /><span>disabled checkbox</span></label>
Snippet'i genişlet

— Adan Rehtla
kaynak
10

Güncel olmadığımı biliyorum .. Ancak küçük bir çözüm, onay kutunuzu bir etiket etiketinin içine koymak ve ardından etiketi bir kenarlıkla biçimlendirmek olabilir:

<label class='hasborder'><input type='checkbox' /></label>

ardından etiketin stilini belirleyin:

.hasborder { border:1px solid #F00; }
— Hüssam
kaynak
1
Ayrıca, etiket öğesinin, içindeki onay kutusu görüntülenemese bile, her tıklandığında onay kutusunu işaretleyeceğini unutmayın. Böylece, etikette şöyle bir şey yapabilirsiniz label { position: relative; overflow: hidden; width: 16px; height: 16px; border: 1px solid #0f0; }ve sonra label > input[type=checkbox] { position: absolute; left: -999px; }Bu, kendi onay kutunuzu özel olarak biçimlendirmenize izin verir ve orijinal onay kutusu yine de işaretlenir / işareti kaldırılır, ancak kullanıcı bunu görmez. Yalnızca özel onay kutunuzu görecekler.
— Gavin
1
Eklemeyi unuttuysanız, özel onay kutunuzun diğer durumlarını biçimlendirmek için :hoverve gibi seçicileri kullanabilirsiniz :checked.
— Gavin
10

İşte onay kutusu ticker için FontAwesome kullanan sürümüm, bence FontAwesome neredeyse herkes tarafından kullanılıyor, bu yüzden sizin de sahip olduğunuzu varsaymak güvenli. IE / Edge'de test edilmedi ve kimsenin umursadığını sanmıyorum.

input[type=checkbox] {
	-moz-appearance:none;
	-webkit-appearance:none;
	-o-appearance:none;
	outline: none;
	content: none;	
}

input[type=checkbox]:before {
	font-family: "FontAwesome";
    content: "\f00c";
    font-size: 15px;
    color: transparent !important;
    background: #fef2e0;
    display: block;
    width: 15px;
    height: 15px;
    border: 1px solid black;
    margin-right: 7px;
}

input[type=checkbox]:checked:before {

	color: black !important;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>

<input type="checkbox">
Snippet'i genişlet

— pendingfox
kaynak
9

İçin Firefox , Chrome ve Safari hiçbir şey olmaz.

için IE sınır onay kutusunu (değil onay kutusunun parçası olarak) dışında uygulanır ve onay kutusunu etkisi gölgeleme "fantezi" gone (Oldfashioned onay kutusunu olarak gösterilir) olduğu.

For Opera sınır tarzı aslında onay kutusu elemanı üzerinde sınır uyguluyor.
Opera ayrıca, onay kutusundaki diğer stilleri diğer tarayıcılardan daha iyi işler: renk , işaretin rengi olarak uygulanır, arka plan rengi, onay kutusunun içinde arka plan rengi olarak uygulanır (IE, onay kutusu bir kutunun içindeymiş gibi arka planı uygular.<div> )) .

Sonuç

En kolay çözüm, onay kutusunu <div>diğerlerinin önerdiği gibi bir kutuya yerleştirmektir .
Görünümü tamamen kontrol etmek istiyorsanız, gelişmiş image / javascript yaklaşımına gitmeniz gerekecek, aynı zamanda başkaları tarafından da ifade edildi.

— huşu
kaynak
2
Araştırma için +1, ancak onu bir div içine sarmak bir çözüm değil . Onay kutusunu biçimlendirmenize izin vermez, onu gizlemeye ve kendi sorunları olacak şekilde boyamaya başlamadıkça, onay kutusu etrafında stil oluşturmanıza izin verir .
Onay kutusunu biçimlendirmenize izin veren tek tarayıcı Opera'dır. Bunu bir div içine sarmak yeterince iyi bir çözüm olabilir, ancak bu gerçekten ne istediğinize bağlı. IE, onay kutusunu biçimlendirmeye çalışırsanız, aslında onu bir div'e koymuşsunuz gibi davranır!
— korku
7

Görsel görünümü büyük ölçüde değiştirmek istiyorsanız, onay kutularını (ve bu materyal için diğer birçok girdi öğesini) şekillendirmek, saf css ile gerçekten mümkün değildir.

Yapabileceğiniz en iyi şey, jqTransform'un yaptığı gibi , girişlerinizi görüntülerle değiştiren ve bir onay kutusunu (veya bu konuyla ilgili başka bir öğeyi) taklit etmek için ona javascript davranışı uygulayan bir şey uygulamaktır.

— ChrisR
kaynak
4

Hayır, yine de onay kutusunun stilini belirleyemezsiniz, ancak (sonunda) bir onay kutusunu tıklama işlevselliğini korurken bir illüzyonu nasıl şekillendireceğimi buldum . Bu, imleç mükemmel bir şekilde hareketsiz olmasa bile, metni seçme veya sürükle ve bırak işlemlerini tetikleme riski olmadan değiştirebileceğiniz anlamına gelir!

Örnek, bir etiket içinde bazı metinlerin yanı sıra bir aralık "düğmesi" kullanıyor, ancak size onay kutusunu nasıl görünmez hale getirebileceğiniz ve arkasına nasıl bir şey çizebileceğiniz konusunda fikir veriyor.

Bu çözüm muhtemelen radyo düğmelerine de uyar.

Aşağıdakiler IE9, FF30.0 ve Chrome 40.0.2214.91'de çalışır ve sadece temel bir örnektir. Yine de arka plan resimleri ve sözde öğelerle birlikte kullanabilirsiniz.

http://jsfiddle.net/o0xo13yL/1/

label {
    display: inline-block;
    position: relative; /* needed for checkbox absolute positioning */
    background-color: #eee;
    padding: .5rem;
    border: 1px solid #000;
    border-radius: .375rem;
    font-family: "Courier New";
    font-size: 1rem;
    line-height: 1rem;
}

label > input[type="checkbox"] {
    display: block;
    position: absolute; /* remove it from the flow */
    width: 100%;
    height: 100%;
    margin: -.5rem; /* negative the padding of label to cover the "button" */
    cursor: pointer;
    opacity: 0; /* make it transparent */
    z-index: 666; /* place it on top of everything else */
}

label > input[type="checkbox"] + span {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 1px solid #000;
    margin-right: .5rem;
}

label > input[type="checkbox"]:checked + span {
    background-color: #666;
}

<label>
    <input type="checkbox" />
    <span>&nbsp;</span>Label text
</label>
— LGT
kaynak
2

İşte basit bir yol (sözde öğeler / sınıflardan önce veya sonra kullanmak için):

input[type=checkbox] {
    position: relative;
}

input[type=checkbox]:after {
    position: absolute;
    top: 0;
    left: 0;
    /* Above three lines allow the checkbox:after position at checkbox's position */
    content: '';
    width: 32px;
    height: 32px;
    z-index: 1; /* This allows the after overlap the checkbox */
    /* Anything you want */
}
— Alex Fang
kaynak
Bence bu, onay kutunuzu ve buna benzer şeyleri yeniden biçimlendirmenin akıllıca bir yolu.
— Alex Fang
1
Firefox ve IE'de çalışmıyor. Daha da önemlisi bu , Chrome'un yanlış bir uygulamasıdır, çünkü geçersiz öğelerin herhangi bir içeriğe sahip olmasına izin VERİLMEZ.
— Aslan
Leo, "içerikler" terimini yanlış yorumluyorsun, tüm söylediği şu boşluk öğelerinin arada içerik olamayacağı çünkü kapanış etiketi yok. örneğin <a> içerik </a> bir kapanış etiketine sahiptir, bu nedenle bu etiketler arasında bir içerik olabilir. ancak girdi, kapanış etiketine sahip olmadığından içeriği prensip olarak alamaz. Öte yandan, sözde elemanların her yerde kullanılmasına izin verilen "içerik" adlı bir özelliği vardır.
— pendingfox
-1 

<!DOCTYPE html>
<html>
<head>
<style> 

.abc123
{
	-webkit-appearance:none;
    width: 14px;
    height: 14px;
    display: inline-block;
    background: #FFFFFF;
	border: 1px solid rgba(220,220,225,1);
}
.abc123:after {
  content: "";
  display: inline-block;
  position: relative;
  top: -3px;
  left: 4px;
  width: 3px;
  height: 5px;
  border-bottom: 1px solid #fff;
  border-right: 1px solid #fff;
  -webkit-transform: rotate(45deg);
}

input[type=checkbox]:checked   {
    background: #327DFF;
    outline: none;
    border: 1px solid rgba(50,125,255,1);
}
input:focus,input:active {
	outline: none;
}

input:hover {
   border: 1px solid rgba(50,125,255,1);
}

</style>
</head>
<body>

<input class="abc123" type="checkbox"></input>


</body>
</html>
Snippet'i genişlet

— KeepLearn
kaynak
İlk: ": sonra" oluştur √; İkincisi: "-webkit-görünüm: yok" origion stilinin çalışmamasına izin verdikten sonra stilinizi tanımlayabilirsiniz.
— KeepLearn
2
Lütfen cevabınız hakkında kısa bir açıklama yazın.
— Angel F Syrus
-5

onu bir div'e koyun ve div'e kenarlık ekleyin

— Midhat
kaynak
5
O zaman çift sınırınız olur.
— Egor Pavlikhin
<div style = "border-style: solid; width: 120px;"> <input type = "checkbox" name = "mycheck"> Onay Kutum </input> </div> htmlsandbox
— Midhat
8
'İyi çalışıyor' tanımlayın. Örneğin, 120 piksel genişliğinde bir onay kutusu görmedim.
-8 
<div style="border-style: solid;width:13px"> 
   <input type="checkbox" name="mycheck" style="margin:0;padding:0;">
   </input> 
</div>
— Midhat
kaynak
7
@lexu </input> diye bir şey yok
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.