সিএসএস সহ স্টাইল অক্ষম বোতাম

Question

আমি নীচের ফিডলগুলিতে এম্বেড থাকা চিত্র সহ একটি বোতামের স্টাইলটি পরিবর্তন করার চেষ্টা করছি:

http://jsfiddle.net/krishnathota/xzBaZ/1/

উদাহরণে কোনও চিত্র নেই, আমি ভীত।

আমি চেষ্টা করছি:

1. background-colorঅক্ষম হয়ে গেলে বোতামটির পরিবর্তন করুন
2. চিত্রটি অক্ষম হয়ে গেলে বাটনে পরিবর্তন করুন
3. অক্ষম হলে হোভার প্রভাবটি অক্ষম করুন
4. আপনি যখন বোতামটিতে চিত্রটি ক্লিক করেন এবং এটিকে টেনে আনেন, চিত্রটি আলাদাভাবে দেখা যায়; আমি তা এড়াতে চাই
5. বোতামের পাঠ্যটি নির্বাচন করা যেতে পারে। আমিও তা এড়াতে চাই।

আমি করছেন চেষ্টা button[disabled]। তবে কিছু প্রভাব অক্ষম করা যায়নি। মত top: 1px; position: relative;এবং ইমেজ।

Answer 1

অক্ষম বোতামগুলির জন্য আপনি :disabledছদ্ম-উপাদান ব্যবহার করতে পারেন । এটি সমস্ত উপাদানগুলির জন্য কাজ করে।

ব্রাউজার / ডিভাইসগুলির জন্য কেবল সিএসএস 2 সমর্থন করে, আপনি [disabled]নির্বাচক ব্যবহার করতে পারেন ।

ছবিটির মতো, বোতামে কোনও চিত্র রাখবেন না। সিএসএস ব্যবহার করুন background-imageসঙ্গে background-positionএবং background-repeat। এইভাবে, চিত্রটি টেনে আনতে হবে না।

নির্বাচনের সমস্যা: এখানে নির্দিষ্ট প্রশ্নের লিঙ্ক রয়েছে:

• পাঠ্য নির্বাচন হাইলাইটিং কীভাবে অক্ষম করবেন?

অক্ষম নির্বাচকের জন্য উদাহরণ:

button {
  border: 1px solid #0066cc;
  background-color: #0099cc;
  color: #ffffff;
  padding: 5px 10px;
}

button:hover {
  border: 1px solid #0099cc;
  background-color: #00aacc;
  color: #ffffff;
  padding: 5px 10px;
}

button:disabled,
button[disabled]{
  border: 1px solid #999999;
  background-color: #cccccc;
  color: #666666;
}

div {
  padding: 5px 10px;
}

<div>
  <button> This is a working button </button>
</div>

<div>
  <button disabled> This is a disabled button </button>
</div>

Comments

সিএসএস 2 বা 3 (বা উভয়) এ প্রযোজ্য?

— ViniciusPires

আমি যতদূর জানি, :disabledনির্বাচকটি সিএসএস 3 নির্বাচনকারী। background-image, background-repeat, background-positionসিএসএস 2. কাজ করছে

— beerwin

সুতরাং সম্ভবত এটি করা: অক্ষম, [অক্ষম] CSS2 এবং 3 এ কাজ করবে?

— ViniciusPires

কেবল লক্ষণীয়, এর ="true"অংশটি disabled="true"এটিকে অক্ষম করে তুলছে না। আপনি ব্যবহার করতে পারে disabled="false"বা disabled="cat"এবং এটি এখনও অক্ষম হবে। বা কেবল disabledকোনও মূল্য নেই। এই সম্পত্তিটি কেবল এইচটিএমএলে উপস্থিত / বাদ দেওয়া যেতে পারে, বা জাভাস্ক্রিপ্টের মাধ্যমে সত্য / মিথ্যা দিয়ে যুক্ত করা যেতে পারে

— ড্রেনাই

Answer 2

আমি মনে করি আপনার নিম্নলিখিত ব্যবহার করে অক্ষম বোতামটি নির্বাচন করতে সক্ষম হওয়া উচিত:

button[disabled=disabled], button:disabled {
    // your css rules
}

Comments

আমি কি হোভারটি অক্ষম করতে পারি ?? এবং আমি শুনেছি যে আই 6 এ কাজ করবে না?

— কৃষ্ণ থোটা

আমি মনে করি না আপনি পারবেন তবে আমি 100% নিশ্চিত নই। যদি আপনি অক্ষম বোতামগুলিতে অক্ষম শ্রেণীর একটি শ্রেণিও যুক্ত করতে পারেন তবে আপনি সম্ভবত এটি ক্লাসের মাধ্যমে করতে পারেন।

— বিলি মোইট

Answer 3

আপনার পৃষ্ঠায় নীচের কোড যুক্ত করুন। আমার উপর বিশ্বাস করুন, জাভাস্ক্রিপ্টে বোতাম শ্রেণিটি যুক্ত / সরান কেবলমাত্র অক্ষম / সক্ষম করতে বাটন ইভেন্টগুলিতে কোনও পরিবর্তন করা হয়নি।

পদ্ধতি 1

 <asp Button ID="btnSave" CssClass="disabledContent" runat="server" />

<style type="text/css">
    .disabledContent 
    {
        cursor: not-allowed;
        background-color: rgb(229, 229, 229) !important;
    }

    .disabledContent > * 
    {
        pointer-events:none;
    }
</style>

পদ্ধতি 2

<asp Button ID="btnSubmit" CssClass="btn-disable" runat="server" />

<style type="text/css">
    .btn-disable
        {
        cursor: not-allowed;
        pointer-events: none;

        /*Button disabled - CSS color class*/
        color: #c0c0c0;
        background-color: #ffffff;

        }
</style>

Comments

ঠিক আমি খুঁজছেন ছিল কি. বোতামটি অক্ষম কিন্তু সক্ষম দেখায়!

— ডোমি

বোতামটি অক্ষম বোধ করার জন্য নীচে সিএসএস কোড রঙ যুক্ত করুন: # c0c0c0; পটভূমি রঙ: # fffff;

— তামিলসেলভেন কে

Answer 4

অক্ষম বোতামটির জন্য ধূসর বোতাম সিএসএস প্রয়োগ করতে।

button[disabled]:active, button[disabled],
input[type="button"][disabled]:active,
input[type="button"][disabled],
input[type="submit"][disabled]:active,
input[type="submit"][disabled] ,
button[disabled]:hover,
input[type="button"][disabled]:hover,
input[type="submit"][disabled]:hover
{
  border: 2px outset ButtonFace;
  color: GrayText;
  cursor: inherit;
  background-color: #ddd;
  background: #ddd;
}

Answer 5

সিএসএস দ্বারা :

.disable{
   cursor: not-allowed;
   pointer-events: none;
}

এগুলি আপনি যে বোতামটিতে কোনও সজ্জা যুক্ত করতে পারেন। স্থিতি পরিবর্তনের জন্য আপনি jquery ব্যবহার করতে পারেন

$("#id").toggleClass('disable');

Answer 6

আমাদের সবার বুটস্ট্র্যাপ ব্যবহারের জন্য, আপনি "অক্ষম" শ্রেণি যুক্ত করে এবং নিম্নলিখিতগুলি ব্যবহার করে স্টাইলটি পরিবর্তন করতে পারেন:

এইচটিএমএল

<button type="button"class="btn disabled">Text</button>

সিএসএস

.btn:disabled,
.btn.disabled{
  color:#fff;
  border-color: #a0a0a0;
  background-color: #a0a0a0;
}
.btn:disabled:hover,
.btn:disabled:focus,
.btn.disabled:hover,
.btn.disabled:focus {
  color:#fff;
  border-color: #a0a0a0;
  background-color: #a0a0a0;
}

মনে রাখবেন যে "অক্ষম" শ্রেণি যুক্ত করা অগত্যা বোতামটি অক্ষম করে না, উদাহরণস্বরূপ একটি জমা ফর্মে। এর আচরণটি অক্ষম করতে অক্ষম সম্পত্তিটি ব্যবহার করুন:

<button type="button"class="btn disabled" disabled="disabled">Text</button>

কিছু উদাহরণ সহ একটি কাজের ভারসাম্য এখানে উপলব্ধ ।

Answer 7

যখন আপনার বোতামটি অক্ষম থাকে তখন এটি সরাসরি অস্বচ্ছতা সেট করে। সুতরাং প্রথমে আমাদের এর অপসারণ হিসাবে সেট করতে হবে

.v-button{
    opacity:1;    
}

Answer 8

input[type="button"]:disabled,
input[type="submit"]:disabled,
input[type="reset"]:disabled,
{
  //  apply css here what u like it will definitely work...
}

Answer 9

নিম্নলিখিত সমাধান বিবেচনা করুন

.disable-button{ 
  pointer-events: none; 
  background-color: #edf1f2;
}

Comments

এই সমাধানটি যে অ্যাপ্লিকেশন / পরিষেবাটি নির্মাণ করছে তার দুর্বলতা বাড়িয়ে তুলবে।

— ফ্রাঙ্কো গিল

@ ফ্র্যাঙ্কগিল আপনি ঠিক বলেছেন তবে এটি অক্ষম বোতামটি অর্জনের একটি উপায় হতে পারে

— সাহিল রালকার

Answer 10

এবং আপনি যদি স্ক্যাস ব্যবহারে পরিবর্তন করেন:

button {
  backgroud-color: #007700
  &:disabled {
    backgroud-color: #cccccc
  }
}

Answer 11

নীচে হিসাবে সিএসএস প্রয়োগ করা প্রয়োজন:

button:disabled,button[disabled]{
    background-color: #cccccc;
    cursor:not-allowed !important;
  }