CSS में चेकबॉक्स की बॉर्डर स्टाइल कैसे बदलें?

Question

मैं चेकबॉक्स (इनपुट) सीमा की शैली कैसे बदल सकता हूं? मैंने इसे लगा दिया border:1px solid #1e5180है, लेकिन फ़ायरफ़ॉक्स 3.5 में, कुछ भी नहीं होता है!

Answer 1

अगर किसी भी ब्राउज़र में कुछ होता है तो मुझे आश्चर्य होगा। यह उन उत्कृष्ट फॉर्म एलिमेंट्स में से एक है, जो ब्राउज़र आपको बहुत स्टाइल करने नहीं देते हैं, और यह कि लोग आमतौर पर जावास्क्रिप्ट के साथ बदलने की कोशिश करते हैं ताकि वे चेकबॉक्स की तरह दिखने और कार्य करने के लिए कुछ शैली / कोड कर सकें।

Comments

ओपेरा चेकबॉक्स पर स्टाइल को बहुत अच्छी तरह से संभालता है। IE में कुछ स्टाइल है जो चेकबॉक्स के चारों ओर लपेटता है (चेकबॉक्स पर ही नहीं)।

— विस्मय

वे वास्तव में आजकल बदसूरत हैं: D

— Gergely Fehérvári

2020 में अभी भी बदसूरत हैं

— पॉल

Answer 2

मैं "सीमा" के बजाय "रूपरेखा" का उपयोग करने का सुझाव देता हूं। उदाहरण के लिए outline: 1px solid #1e5180:।

Comments

आउटलाइन एक बेहतरीन विकल्प है।

— निप्पाइसॉरस

रूपरेखा बहुत अच्छी है, और यह सभी इनपुट और चुनिंदा बक्से के लिए काम करती है, जिससे यह ".error" कक्षाओं के लिए उपयोगी है।

— SztupY

!importantरूपरेखा का उपयोग करते समय आपको अपने सीएसएस में जोड़ने की आवश्यकता हो सकती है । मैं 12.0 फ़ायरफ़ॉक्स में यह परीक्षण कर रहा था और महत्वपूर्ण बिना रूपरेखा के गायब हो जाएगा जब तक मैं चेकबॉक्स पर क्लिक कर रहा था।

— वीजेल

यह एक बढ़िया विकल्प है, लेकिन रूपरेखा की समस्या यह है कि IE7 में यह काम नहीं करता है !!

— यूल

@ क्या आपको IE7 के बारे में चिंता करनी है? Yikes, मैं माफी चाहता हूँ।

— theblang

Answer 3

आपको उपयोग करना चाहिए

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

तब आप डिफ़ॉल्ट चेकबॉक्स छवि / शैली से छुटकारा पा लेते हैं और इसे स्टाइल कर सकते हैं। वैसे भी एक सीमा अभी भी फ़ायरफ़ॉक्स में होगी

Comments

ओपेरा आपको बिना किसी अतिरिक्त हैकरी के चेकबॉक्स को स्टाइल करने देता है - मैं -ओ-उपस्थिति शैली को छोड़ दूंगा। -मोज़-उपस्थिति और -webkit- उपस्थिति, हालांकि महान हैं।

— नीलल

उफ़ - बहुत जल्दी ही बोला गया: "-webkit- उपस्थिति: कोई नहीं;" चेकबॉक्स व्यवहार को अक्षम करने के लिए लगता है।

— नीलल

मेरे लिए (क्रोम 5) यह नहीं है, आपको स्टाइल करने की आवश्यकता है: चेक स्टेट अतिरिक्त

— Valerij

उपस्थिति सीएसएस मानक का हिस्सा नहीं था। इसका प्रयोग न करें।

— एवगेनी

वाह यह कमाल है मैं प्लगइन्स से छुटकारा पाने वाला हूं। मैं कुछ भी कर सकता हूं => | इनपुट [प्रकार = चेकबॉक्स] | इनपुट [प्रकार = चेकबॉक्स]: होवर | input [टाइप = चेकबॉक्स]: चेक किया गया | इनपुट [टाइप = चेकबॉक्स]: चेक किया गया: ... के बाद

— h0mayun

Answer 4

बॉर्डर नकली करने के लिए आप बॉक्स छाया का उपयोग कर सकते हैं:

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

Comments

@retrovertigo किस संस्करण में है?

— डेनिस हेडेन

संस्करण 12.0.2 (14606.3.4) / macOS 10.14 पर नवीनतम

— रेट्रोवर्टिगो

@retrovertigo मैंने अपने समाधान का परीक्षण किया है और आप सही हैं। मेरा जवाब सफारी के लिए आगे के संशोधनों के बिना काम नहीं करता (जैसे -webkit- उपस्थिति: कोई नहीं;)। 3 साल बाद, मैं लंबित या अदन द्वारा दिए गए समाधानों का उपयोग करूंगा। लेकिन मैं कुछ हफ्तों के भीतर अपना जवाब देने की कोशिश करूंगा। आपकी प्रतिक्रिया के लिए आपका धन्यवाद।

— डेनिस हैडेन

Answer 5

यहां CSS3 लिंक के साथ मार्टिन के कस्टम चेकबॉक्स और रेडियो बटन पर आधारित शुद्ध CSS (कोई चित्र नहीं) क्रॉस-ब्राउज़र समाधान है: http://martinivanov.net/2012/12/12/21/imageless-custom-checkboxes-and-radio-buttons -साथ-css3-दोबारा गौर /

यहाँ एक jsField है: http://jsfiddle.net/DJRavine/od26wL6n/

मैंने निम्न ब्राउज़रों पर इसका परीक्षण किया है:

• फ़ायर्फ़ॉक्स (41.0.2) (42)
• Google Chrome (46.0.2490.80 मीटर)
• ओपेरा (33.0.1990.43)
• इंटरनेट एक्सप्लोरर (11.0.10240.16431 [अपडेट संस्करण: 11.0.22])
• Microsoft एज (20.10240.16384.0)
• सफारी मोबाइल 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>

Answer 6

मुझे पता है कि मैं बूढ़ा हो गया हूं .. लेकिन एक लेबल टैग के अंदर अपना चेकबॉक्स डालने के लिए थोड़ा वर्कअराउंड होगा, फिर एक बॉर्डर के साथ लेबल को स्टाइल करें:

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

तब लेबल शैली:

.hasborder { border:1px solid #F00; }

Comments

यह भी ध्यान रखें, जब भी क्लिक किया जाता है, तो लेबल तत्व चेकबॉक्स की जांच करेगा, भले ही चेकबॉक्स उसके अंदर देखने योग्य न हो। तो लेबल पर आप ऐसा कुछ कर सकते हैं label { position: relative; overflow: hidden; width: 16px; height: 16px; border: 1px solid #0f0; }और फिर label > input[type=checkbox] { position: absolute; left: -999px; }यह आपको कस्टम स्टाइल को अपना चेकबॉक्स देगा और मूल चेकबॉक्स अभी भी चेक / अनचेक किया जाएगा, लेकिन उपयोगकर्ता इसे नहीं देखेगा। वे केवल आपका कस्टम चेकबॉक्स देखेंगे।

— गैविन

जोड़ना भूल गए, तो आप अपने कस्टम चेकबॉक्स के अन्य राज्यों को पसंद करने :hoverऔर :checkedस्टाइल करने के लिए चयनकर्ताओं का उपयोग कर सकते हैं ।

— गेविन

Answer 7

यहाँ मेरा संस्करण है जो चेकबॉक्स टिकर के लिए FontAwesome का उपयोग करता है, मुझे लगता है कि FontAwesome का उपयोग लगभग हर कोई करता है इसलिए यह मान लेना सुरक्षित है कि आपके पास भी है। आईई / एज में परीक्षण नहीं किया गया है और मुझे नहीं लगता कि किसी को परवाह है।

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

Answer 8

के लिए फ़ायरफ़ॉक्स , क्रोम और सफारी , कुछ नहीं होता।

के लिए आईई सीमा चेकबॉक्स (नहीं चेकबॉक्स का हिस्सा है) के बाहर लागू किया जाता है, और "कल्पना" छायांकन चेकबॉक्स में प्रभाव चला गया (एक oldfashioned चेकबॉक्स के रूप में प्रदर्शित) है।

के लिए ओपेरा बॉर्डर शैली वास्तव में चेकबॉक्स तत्व पर सीमा लागू कर रहा है।
ओपेरा भी अन्य ब्राउज़रों की तुलना में चेकबॉक्स पर अन्य स्टाइलिंग को संभालता है: रंग को टिक के रंग के रूप में लागू किया जाता है, पृष्ठभूमि-रंग को चेकबॉक्स के अंदर पृष्ठभूमि रंग के रूप में लागू किया जाता है (आईई पृष्ठभूमि को लागू करता है जैसे कि चेकबॉक्स <div>पृष्ठभूमि के साथ अंदर था ) ।

निष्कर्ष

सबसे आसान उपाय यह है <div>कि दूसरों की तरह सुझाए गए चेकबॉक्स को लपेटें ।
यदि आप उपस्थिति को पूरी तरह से नियंत्रित करना चाहते हैं, तो आपको उन्नत छवि / जावास्क्रिप्ट दृष्टिकोण के साथ जाना होगा, अन्य लोगों द्वारा भी इसका मतलब है।

Comments

अनुसंधान के लिए +1, लेकिन इसे div के अंदर लपेटना कोई समाधान नहीं है। यह आपको चेकबॉक्स को स्टाइल करने की अनुमति नहीं देता है, यह आपको चेकबॉक्स के चारों ओर शैली करने देता है , जब तक कि आप इसे छिपाने की कोशिश करना शुरू नहीं करते हैं और इसके ऊपर पेंट करते हैं, जिसकी अपनी समस्याएं हैं।

खैर, एकमात्र ब्राउज़र जो आपको चेकबॉक्स को स्टाइल करने देता है वह है ओपेरा। एक div के अंदर इसे लपेटना एक ऐसा उपाय है जो काफी अच्छा हो सकता है, लेकिन यह वास्तव में इस पर निर्भर करता है कि आप क्या चाहते हैं। यदि आप चेकबॉक्स को स्टाइल करने की कोशिश करते हैं तो IE वास्तव में आपके जैसे काम करता है!

— खौफ

Answer 9

स्टाइलिंग चेकबॉक्स (और उस मैटर के लिए कई अन्य इनपुट तत्व) शुद्ध सीएसएस के साथ वास्तव में संभव नहीं है यदि आप दृश्य उपस्थिति को काफी बदलना चाहते हैं।

आपका सबसे अच्छा दांव कुछ ऐसा लागू करना है जैसे कि jqTransform करता है जो वास्तव में आपको छवियों के साथ इनपुट की जगह देता है और एक चेकबॉक्स (या उस मामले के लिए अन्य तत्व) की नकल करने के लिए उस पर जावास्क्रिप्ट व्यवहार लागू करता है

Answer 10

नहीं, आप अभी भी चेकबॉक्स को स्टाइल नहीं कर सकते हैं, लेकिन मैंने (अंत में) यह पता लगाया कि चेकबॉक्स पर क्लिक करने की कार्यक्षमता को बनाए रखते हुए भ्रम को कैसे स्टाइल किया जाए । इसका मतलब है कि आप इसे टॉगल कर सकते हैं, भले ही कर्सर पूरी तरह से अभी भी बिना टेक्स्ट का चयन किए या ड्रैग-एंड-ड्रॉप को ट्रिगर किए बिना न हो!

उदाहरण एक स्पैन "बटन" के साथ-साथ एक लेबल में कुछ पाठ का उपयोग कर रहा है, लेकिन यह आपको यह विचार देता है कि आप चेकबॉक्स को कैसे अदृश्य बना सकते हैं और इसके पीछे कुछ भी आकर्षित कर सकते हैं।

यह समाधान शायद रेडियो बटन भी फिट बैठता है।

IE9, FF30.0 और Chrome 40.0.2214.91 में निम्नलिखित कार्य करता है और यह केवल एक मूल उदाहरण है। आप इसे अभी भी पृष्ठभूमि छवियों और छद्म तत्वों के संयोजन में उपयोग कर सकते हैं।

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>

Answer 11

यहाँ एक सरल तरीका है (छद्म तत्वों / वर्गों से पहले या बाद में उपयोग करने के लिए):

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 */
}

Comments

मुझे लगता है कि यह आपके चेकबॉक्स और इस तरह के किसी भी चीज़ को बहाल करने का एक स्मार्ट तरीका है।

— एलेक्स फेंग

फ़ायरफ़ॉक्स और IE पर काम नहीं कर रहा। इससे भी महत्वपूर्ण बात, यह क्रोम का गलत कार्यान्वयन है, क्योंकि शून्य तत्वों को किसी भी सामग्री की अनुमति नहीं है।

— सिंह

लियो, आप "कंटेंट" शब्द का गलत अर्थ लगा रहे हैं, यह सभी कहते हैं कि उन शून्य तत्वों के बीच में सामग्री नहीं हो सकती क्योंकि कोई समापन टैग नहीं है। उदाहरण के लिए <a> सामग्री </a> में एक समापन टैग है, इसलिए उन टैगों के बीच एक सामग्री हो सकती है। लेकिन इनपुट में समापन टैग नहीं है, इसलिए इसमें सिद्धांत द्वारा सामग्री नहीं हो सकती है। दूसरी ओर, छद्म तत्वों के पास "सामग्री" नामक एक संपत्ति है जिसे हर जगह उपयोग करने की अनुमति है।

— लंबित

Answer 12

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

Comments

पहला: ":" बनाने के बाद "; दूसरा: "-webkit- उपस्थिति: कोई नहीं" चलो मूल शैली काम नहीं कर सकती है, और फिर आप अपनी शैली को परिभाषित कर सकते हैं।

— KeepLearn

कृपया अपने उत्तर के बारे में एक संक्षिप्त विवरण लिखें।

— एंजल एफ साइरस

Answer 13

इसे एक div में रखें और div में बॉर्डर जोड़ें

Comments

तब आपके पास दोहरी सीमा होगी।

— ईगोर पावलखिन

<div शैली = "सीमा-शैली: ठोस; चौड़ाई: 120px;"> <input type = "checkbox" नाम = "mycheck"> मेरे चेकबॉक्स </ इनपुट> </ div> काम करता है htmlsandbox के साथ ठीक

— Midhat

'ठीक काम करता है' को परिभाषित करें। उदाहरण के लिए, मैंने कभी भी एक चेकबॉक्स 120px चौड़ा नहीं देखा है।

Answer 14

<div style="border-style: solid;width:13px"> 
   <input type="checkbox" name="mycheck" style="margin:0;padding:0;">
   </input> 
</div>

Comments

@lexu </ input>