Blog

বুটস্ট্র্যাপে ফর্ম ইনপুট অথবা সিলেক্ট ট্যাগের বর্ডার রিমুভ করবেন যেভাবে

Screenshot_119
Tips & Tricks

বুটস্ট্র্যাপে ফর্ম ইনপুট অথবা সিলেক্ট ট্যাগের বর্ডার রিমুভ করবেন যেভাবে

আমরা অনেকেই ওয়েব ডিজাইন করার সময় বুটস্ট্র্যাপ ফ্রেম ওয়ার্ক ব্যবহার করি। বুটস্ট্র্যাপ ব্যবহার করাটা যেমন মজার তেমনি এটি আমাদের প্রচুর সময় বাঁচিয়ে দেয় তাও আবার প্রায় ৯৫% রেস্পন্সিভ সহ! কিন্তু অনেক সময় আমরা বুটস্ট্র্যাপ এর যে form-control ক্লাসটি ব্যবহার করে ফর্ম ক্রিয়েট করি, তখন একটা বিষয় বেশ ইরিটেটিং লাগতে পারে অনেকের। তা হচ্ছে বুটস্ট্র্যাপ এর ফর্মে বিল্ট ইন ইনপুট/সিলেক্ট বর্ডার। অনেকে ব্যপারটা ফিক্স করতে পেরেছি অনেকে পারিনি। যারা পারিনি তাদের জন্য আজকের এই মিনি ব্লগ!

৩টি ছোট্ট স্টেপের মাধ্যমে ফিক্স করব। আর ভূমিকা না করে সরাসরি মিনি জার্নিটাতে চলে যাই চলুন।

Step 1

একটি ইনপুট এবং সিলেক্ট ট্যাগ নিন।

যেমনঃ

<form>

<input type=”text” class=”form-control ” name=”” id=”type-money” aria-describedby=”helpId” placeholder=”$1000″>

<select id=”select-year” class=”form-select ” aria-label=”Default select example”>

<option selected=””>1 Month</option>

<option selected=””>2 Month</option>

<option selected=””>4 Month</option>

<option selected=””>5 Month</option>

<option selected=””>6 Month</option>

<option selected=””>7 Month</option>

</select>

</form>

Step 2

এবার এটার class এর ভিতরে যথাক্রমে custom-form-input ও custom-form-select নামে একটা এক্সট্রা ক্লাস নিব, যাতে আমরা কাস্টম ভাবে CSS এর কাজ করতে পারি।

 

<form>

<input type=”text” class=”form-control custom-form-input” name=”” id=”type-money” aria-describedby=”helpId” placeholder=”$1000″>

<select id=”select-year” class=”form-select custom-form-select” aria-label=”Default select example”>

<option selected=””>1 Month</option>

<option selected=””>2 Month</option>

<option selected=””>4 Month</option>

<option selected=””>5 Month</option>

<option selected=””>6 Month</option>

<option selected=””>7 Month</option>

</select>

</form>

Step 3

এবার CSS ফাইলে গিয়ে custom-form-input ও custom-form-select ক্লাসটিকে টার্গেট করুন। নিচের কোডগুলো ফলো করুন!

 

.custom-form-input:focus, .custom-form-input:active{

box-shadow: none !important;

border: none !important;

}

.custom-form-select:focus, .custom-form-select:active{

box-shadow: none !important;

border: none !important;

}

 

ব্যস! আপনার মিনি জার্নি কমপ্লিট!

অভিনন্দন!

এবার ইচ্ছামত ফর্ম ইনপুট কাস্টমাইজ করুন!

আপনাদের সাথে ছিলাম আমি মাহমুদ হাসান আসিফ।

ধন্যবাদ!

 

[ব্লগটি যদি আপনার কাজে এসে থাকে,শেয়ার করতে পারেন।

আর যদি আপনাদের আরো কোনো ছোটখাটো সমস্যা থাকে, তাহলে অবশ্যই জানাবেন।

আমরা একসাথে চেষ্টা করব সমাধান করার!]

Comment (1)

  1. CHANDAN KUMAR ROY

    Thank’s vaiya

Leave your thought here

Your email address will not be published.

Call Now

Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Click outside to hide the compare bar
Compare
Compare ×
Let's Compare! Continue shopping
Need Help? Chat with us