ওয়েব পৃষ্ঠাগুলিতে চেকবক্স - এগুলি কীভাবে আরও বড় করা যায়?

Question

বেশিরভাগ ব্রাউজারগুলিতে রেন্ডার করা স্ট্যান্ডার্ড চেকবক্সগুলি খুব ছোট এবং বড় ফন্ট ব্যবহার করা হলেও আকারে বৃদ্ধি পায় না। বৃহত্তর চেকবক্সগুলি প্রদর্শন করার জন্য সর্বোত্তম, ব্রাউজার-স্বতন্ত্র উপায় কী?

Answer 1

যদি এটি যে কাউকে সহায়তা করতে পারে, এখানে জাম্পিং পয়েন্ট হিসাবে সহজ সিএসএস। একটি টগলড ব্যাকগ্রাউন্ড রঙের থাম্বগুলির জন্য এটি যথেষ্ট বড় গোলাকার স্কোয়ারে পরিণত হয়।

input[type='checkbox'] {
    -webkit-appearance:none;
    width:30px;
    height:30px;
    background:white;
    border-radius:5px;
    border:2px solid #555;
}
input[type='checkbox']:checked {
    background: #abd;
}

<input type="checkbox" />

Comments

পছন্দ করুন কেবল অন্যের জন্য সমতুল্য ব্যবহার করুন

— টেলরক্র্যাসি

@ টেইল্লারস্রেসি আইই বাদে (এছাড়াও আইই ১১) ক্যানিউস.com / #search= চেহারা - তবে অন্যান্য ব্রাউজারগুলির জন্য দুর্দান্ত কাজ করেছে। ধন্যবাদ!

— কোডব্রেয়ার

— রবার্ট কিং

@ পল: ভাগ করে নেওয়ার জন্য ধন্যবাদ। আমি ভাবছিলাম যে আপনি কীভাবে চেকমার্কটি প্রদর্শিত হচ্ছে তা মোকাবেলা করবেন। পটভূমিটি সবেমাত্র একটি রঙে সেট করা আছে, বাক্সে সাদা চেকমার্কটি আর দৃশ্যমান নয়। একটি সহজ সমাধান আছে? আমি চেকের জন্য এইচটিএমএল সত্তা যুক্ত করার চেষ্টা করেছি: এর আগে, তবে ভাবছি এর বিকল্প আছে কিনা

— পিবাডজেন

আমি চেক করা ব্যাকগ্রাউন্ড রঙের জন্য একটি

— গাer়

Answer 2

আসলে এগুলিকে আরও বড় করে তোলার একটি উপায় রয়েছে, অন্য যে কোনও কিছুর মতো চেকবক্সগুলি (এমনকি একটি ফেসবুক বোতামের মতো একটি আইফ্রেম)।

এগুলিকে একটি "জুমড" উপাদানগুলিতে মুড়িয়ে দিন:

.double {
  zoom: 2;
  transform: scale(2);
  -ms-transform: scale(2);
  -webkit-transform: scale(2);
  -o-transform: scale(2);
  -moz-transform: scale(2);
  transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
}

<div class="double">
  <input type="checkbox" name="hello" value="1">
</div>

এটি দেখতে কিছুটা "উদ্ধার" হতে পারে তবে এটি কার্যকর।

অবশ্যই আপনি এই ডিভি ফ্লোট করতে পারেন: বাম এবং এটির পাশাপাশি আপনার লেবেল রাখুন, ভাসা: বামও।

Comments

নোট করুন যে ফায়ারফক্সে (সংস্করণ 36 হিসাবে), এটি খুব ঝাপসা চেহারা দেখাবে। যদিও এটি ক্রোমে ভাল স্কেল করে। ডেমো: jsfiddle.net/tzp858j3

— ক্যাট

এর চেয়ে ভাল সমাধান আর কি নেই যা দেখতে না পাওয়া যায়?

— বাসজিরো

zoom: 2এবং transform: scale(2)সরাসরি চেকবক্সে প্রয়োগ করা যাবে না ? কেন এটি একটি মোড়কের প্রয়োজন?

— আতাভ 32

ধন্যবাদ! দেখে মনে হচ্ছে আপনার কোডটি আরও ব্রাউজারগুলিকে অ্যাকাউন্টে নেয় তবে আমি এর সাথে যাচাই করতে পারি, তবে এটি আমি চেষ্টা করেছি এমন সমস্ত কিছুতে কার্যকর হয়। বিশেষ করে আমার আই-ফোনে দুর্দান্ত, যেখানে চেকবক্সগুলি প্রায় বিন্দু হয়ে যায়! বিটিডাব্লু, আপনি যে জায়গাগুলিতে এই স্নিপেটটি "2" রাখে এবং মাঝারি আকারের চেকবক্সের জন্য ছোট ভগ্নাংশ স্কেলিং রাখতে পারেন (1.5 এর মতো)।

— রেন্ডি

Answer 3

এই সিএসএস চেষ্টা করে দেখুন

input[type=checkbox] {width:100px; height:100px;}

Comments

সম্পূর্ণ ক্রস ব্রাউজার নয় (এটি এইচটিএমএলে একটি শ্রেণি নির্ধারণ করা এবং সিএসএসে শ্রেণি নির্বাচক ব্যবহার করা ভাল) তবে এটি আমার চেয়ে ভাল সমাধান হতে পারে। +1

— হারমান

আমি উদাহরণস্বরূপ প্রস্থ এবং উচ্চতা ব্যবহার করছিলাম। সম্ভবত হারমেন এবং আমার সমাধানের সংমিশ্রণটি হ'ল সেই উপায় যা আপনার সিএসএসের চেয়ে যুক্তিসঙ্গতভাবে সরবরাহ করতে পারে তার চেয়ে বেশি স্টাইলিংয়ের প্রয়োজন হতে পারে।

— কলিন হোয়াইট

এটি কেবলমাত্র কয়েকটি ব্রাউজারে কাজ করবে, না অনেক আধুনিকের মধ্যে।

— আরজে

এটি আইপ্যাড সাফারিতে কাজ করে যেখানে ব্যবহারকারীদের ক্লিক করা সহজ করার জন্য চেকবক্সগুলি প্রায়শই বড় হওয়া দরকার।

— ব্যবহারকারী 3032973

প্রধান সীমাবদ্ধতা হ'ল এটি ফায়ারফক্সে মোটেও কাজ করে না (ফায়ারফক্স ৩ 36 হিসাবে) এবং বাস্তবে এটি বেশ অপ্রাকৃত দেখাবে (চেকবক্সটি নিয়মিত আকারের তবে চারপাশে প্যাডিং 100 x 100px এলাকা পূরণ করে

— কেট

Answer 4

আমি পরিবর্তন চেষ্টা paddingএবং marginএবং পাশাপাশি widthএবং height, এবং তারপর অবশেষে পাওয়া গেছে যে আপনি শুধু স্কেল বৃদ্ধি এটি কাজ করব:

input[type=checkbox] {
    transform: scale(1.5);
}

Answer 5

এখানে একটি কৌশল যা বেশিরভাগ সাম্প্রতিক ব্রাউজারগুলিতে (আই 9 +) কেবলমাত্র সিএসএস সমাধান হিসাবে কাজ করে যা জাভাস্ক্রিপ্টের সাহায্যে IE8 এবং নীচে সমর্থন করার জন্য উন্নত করা যেতে পারে।

<div>
  <input type="checkbox" id="checkboxID" name="checkboxName" value="whatever" />
  <label for="checkboxID"> </label>
</div>

labelআপনি চেকবক্সটি দেখতে কেমন চান তা স্টাইল করুন

#checkboxID
{
  position: absolute fixed;
  margin-right: 2000px;
  right: 100%;
}
#checkboxID + label
{
  /* unchecked state */
}
#checkboxID:checked + label
{
  /* checked state */
}

জাভাস্ক্রিপ্টের জন্য, আপনি রাষ্ট্রটি দেখানোর জন্য লেবেলে ক্লাস যুক্ত করতে সক্ষম হবেন। এছাড়াও, নিম্নলিখিত ফাংশনটি ব্যবহার করা বুদ্ধিমানের কাজ হবে:

$('label[for]').live('click', function(e){
  $('#' + $(this).attr('for') ).click();
  return false;
});

#checkboxIDশৈলীগুলি সংশোধন করতে সম্পাদনা করুন

Comments

দেখতে stackoverflow.com/a/3772914/190135 এই প্রযুক্তিটি জন্য পূর্ণ সোর্স কোড একটি লিঙ্কের জন্য

— AlexChaffee

Answer 6

আমি ফোনগ্যাপ অ্যাপটি লিখন করছি এবং চেকবক্সগুলি আকার, চেহারা ইত্যাদিতে পরিবর্তিত হয় So সুতরাং আমি আমার নিজের সাধারণ চেকবক্সটি তৈরি করেছি:

প্রথম এইচটিএমএল কোড:

<span role="checkbox"/>

তারপরে সিএসএস:

[role=checkbox]{
    background-image: url(../img/checkbox_nc.png);
    height: 15px;
    width: 15px;
    display: inline-block;
    margin: 0 5px 0 5px;
    cursor: pointer;
}

.checked[role=checkbox]{
    background-image: url(../img/checkbox_c.png);
}

চেকবক্সের স্থিতি টগল করতে, আমি JQuery ব্যবহার করেছি:

CLICKEVENT='touchend';
function createCheckboxes()
{
    $('[role=checkbox]').bind(CLICKEVENT,function()
    {
        $(this).toggleClass('checked');
    });
}

তবে এটি সহজেই করা যায় ...

আশা করি এটি সাহায্য করতে পারে!

Answer 7

খাঁটি আধুনিক 2020 সিএসএসঅস্পষ্ট স্কেলিং বা অ-হ্যান্ডি ট্রান্সফর্মিং ছাড়াই সিদ্ধান্ত। আর টিক দিয়ে! =)

ফায়ারফক্স এবং ক্রোমিয়াম-ভিত্তিক ব্রাউজারগুলিতে দুর্দান্ত কাজ করে।

সুতরাং, আপনি কেবলমাত্র প্যারেন্ট ব্লকের সেট করে আপনার চেকবক্সগুলিকে খাঁটি ADAPTIVE রুল করতে পারেন font-heightএবং এটি পাঠ্যের সাহায্যে বৃদ্ধি পাবে!

input[type='checkbox'] {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  outline: none;
  font-size: inherit;
  cursor: pointer;
  width: 1.0em;
  height: 1.0em;
  background: white;
  border-radius: 0.25em;
  border: 0.125em solid #555;
  position: relative;
}

input[type='checkbox']:checked {
  background: #adf;
}

input[type='checkbox']:checked:after {
  content: "✔";
  position: absolute;
  font-size: 90%;
  left: 0.0625em;
  top: -0.25em;
}

<label for="check1"><input type="checkbox" id="check1" checked="checked" /> checkbox one</label>
<label for="check2"><input type="checkbox" id="check2" /> another checkbox</label>