এইচটিএমএল বোতাম / জমা দেওয়ার সম্পূর্ণ স্টাইলিং সরান

Question

ইন্টারনেট এক্সপ্লোরারে কোনও বোতামের স্টাইলিং পুরোপুরি সরানোর কোনও উপায় আছে? আমি আমার বোতামের জন্য একটি সিএসএস স্প্রিট ব্যবহার করি এবং সবকিছু ঠিক আছে।

তবে আমি যখন বোতামটি ক্লিক করি তখন এটি উপরে উঠে যায় সামান্য, এটি আকারের বাইরে দেখায় of এখানে কি সিএসএস ক্লিকের রাজ্য, বা মোসডাউন রয়েছে? আমি জানি না কী সেই রাষ্ট্রকে ট্রিগার করে।

আমি জানি এটি আসলে খুব বড় বিষয় নয়, তবে কখনও কখনও এটি ছোট বিষয়গুলি গুরুত্বপূর্ণ।

Answer 1

আমি ধরে নিচ্ছি যে আপনি যখন বলছেন ' বোতামটি টিপুন, এটি কিছুটা উপরে চলে যায় ' আপনি বোতামটির জন্য মাউস ডাউন ক্লিকের অবস্থার কথা বলছেন, এবং যখন আপনি মাউস ক্লিকটি প্রকাশ করবেন, তখন এটি তার স্বাভাবিক অবস্থায় ফিরে আসবে ? এবং আপনি এটি ব্যবহার করে বোতামটির ডিফল্ট উপস্থাপনাটি অক্ষম করছেন:

input, button, submit { border:none; } 

যদি তাই..

ব্যক্তিগতভাবে, আমি খুঁজে পেয়েছি যে আপনি আসলে এই আইটি নেটিভ ক্রিয়াকলাপটি থামাতে / ওভাররাইড / অক্ষম করতে পারবেন না, যা আমাকে এই আন্দোলনের জন্য অনুমতি দেওয়ার জন্য আমার মার্কআপটিকে একটু পরিবর্তন করতে বাধ্য করেছিল এবং বিভিন্ন রাজ্যের বোতামের সামগ্রিক চেহারাকে প্রভাবিত করে না।

এটি আমার চূড়ান্ত চিহ্নিতকরণ:

<span class="your-button-class">
    <span>
        <input type="Submit" value="View Person">
    </span>
</span>

Answer 2

আমি মনে করি এটি আরও বিশদ পদ্ধতির সরবরাহ করে:

button, input[type="submit"], input[type="reset"] {
	background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}

<button>Example</button>

Comments

আমি মনে করি না যে পটভূমিতে একটি 'কিছুই নেই' - এবং! গুরুত্বপূর্ণ কোনও ভাল নয়।

— শেরিফডেরেক

সাধারণত, আপনি যখন এটি করছেন আপনি কোনও বোতামের জন্য বিদ্যমান বিদ্যমান শৈলীগুলিকে ওভাররাইড করতে চান। এটি বিরল যে আপনি পরিষ্কার, আনস্টাইল এইচটিএমএল দিয়ে এটি করতে চান, তাই এর ব্যবহার !important। এটি বলেছিল যে এটি একটি পরিস্থিতি সিদ্ধান্ত হিসাবে আমি এটিকে সরিয়েছি। background: noneসম্পূর্ণরূপে বৈধ: stackoverflow.com/questions/20784292/…

— কেভিন লেয়ারি

প্রতিটি তাদের নিজস্ব সম্পর্কিত! গুরুত্বপূর্ণ। আমি মনে করি না যে আমি এমন কোনও প্রকল্পে কাজ করতে পারি যেখানে আমাকে এটি ব্যবহার করতে বাধ্য করা হয়েছিল। RE: 'কিছুই নয়' এখানে একটি উল্লেখ রয়েছে যা কোনও এসও পোস্টের চেয়ে ভাল। আপনি নিজে থেকে যখন 'ব্যাকগ্রাউন্ড' ব্যবহার করেন, আপনি সত্যিই শর্টহ্যান্ড ব্যবহার এবং সমস্ত বৈশিষ্ট্য ক্লোবার্বিং করছেন।

— শেরিফডেরেক

আমি কোনও চিত্রের স্টাইলিং এবং কোনও বোতামের অভ্যন্তরে কিছু পাঠ্য রচনার মধ্যে পার্থক্যের জন্য নিজেকে বাদাম চালিয়ে যাচ্ছিলাম এবং এটি দেখতে এটির বাইরে যেমন রয়েছে <button/>... আমার ক্ষেত্রে, font: inherit;কৌতুকটি করেছিল। ধন্যবাদ!

— কেট

আমি মনে করি অ্যাক্সেসযোগ্যতার উদ্দেশ্যে আপনি সম্ভবত সেই রূপরেখাটি সেখানে রেখে যেতে চান। অন্যথায় আপনি যখন এটি ট্যাব করেন তখন কোনও ভিজ্যুয়াল কিউ থাকে না যেখানে আপনি থাকেন। দুর্দান্ত উত্তর যদিও!

— জন হুপার

Answer 3

আপনার প্রশ্নটি "ইন্টারনেট এক্সপ্লোরার" বলে, তবে অন্যান্য ব্রাউজারগুলিতে আগ্রহী তাদের জন্য, আপনি এখন all: unsetএগুলি আনস্টাইল করার জন্য বোতামগুলিতে ব্যবহার করতে পারেন ।

এটি IE বা এজ 18 তে কাজ করে না, তবে এটি অন্য কোথাও ভাল-সমর্থিত।

https://caniuse.com/#feat=css- সমস্ত

সাফারি রঙের সতর্কতা:color ব্যবহারের পরে বোতামটির পাঠ্য নির্ধারণ করা ওয়েবকিটে কোনও ত্রুটিরall: unset কারণে সাফারি ১৩.১-এ ব্যর্থ হতে পারে । (বাগটি সাফারি 14 এবং উচ্চতর স্থির করা হবে)) " কালোতে সেট করা হচ্ছে , এবং এটি রঙকে ওভাররাইড করে।" ব্যবহারের পরে যদি আপনাকে পাঠ্য সেট করার প্রয়োজন হয় তবে দুটি এবং একই রঙটি সেট করতে ভুলবেন না ।all: unset-webkit-text-fill-colorcolorall: unsetcolor-webkit-text-fill-color

অভিগম্যতা সতর্কতা: ব্যবহারকারীরা মাউস পয়েন্টার ব্যবহার করছেন না অনুরোধে, কিছু পুনরায় যোগ করতে ভুলবেন না :focusস্টাইলিং যেমন, button:focus { outline: orange auto 5px }জন্য কিবোর্ড এ্যক্সেসিবিলিটি ব্যবস্থা ।

এবং ভুলবেন না cursor: pointer। সমস্ত স্টাইলিং all: unsetসরিয়ে দেয় , যা আপনার বোতামের উপর দিয়ে যখন ঘুরিয়ে দেয় তখন আপনার মাউস কার্সারটিকে পয়েন্টিং হাতের মতো দেখায়। আপনি প্রায় অবশ্যই এটি ফিরিয়ে আনতে চান।cursor: pointer

button {
  all: unset;
  color: blue;
  -webkit-text-fill-color: blue;
  cursor: pointer;
}

button:focus {
  outline: orange 5px auto;
}

<button>check it out</button>

Comments

এই জন্য আপনাকে ধন্যবাদ!

— উইল এডিগার

এটি অ্যাক্সেসযোগ্যতার কারণে যুক্তিযুক্ত নয়। উদাহরণস্বরূপ, আপনাকে উপাদান স্টেটের outlineজন্য সমস্ত শৈলী যুক্ত করতে হবে :focus।

— ডেভিন

@ ডেভিন গ্রেট পয়েন্ট! আমি একটি outlineস্টাইল পুনরায় যুক্ত করার পরামর্শ দিয়ে আমার পোস্ট আপডেট করেছি । (তবে আমি মনে করি না যে এ 11-এ উদ্দেশ্যে আমাদের আবার যুক্ত করার দরকারের মতো আরও কিছু আছে

— you

Answer 4

আপনার বোতাম থেকে সীমানা সরানোর চেষ্টা করুন:

input, button, submit
{
  border:none;
}

Answer 5

বুটস্ট্র্যাপ 4 সহজতম। আপনি ক্লাস ব্যবহার করতে পারেন: bg-transparentএবংborder-0

Comments

+ + shadow-noneআমার জন্য এবং এটি যথেষ্ট নয়। ধন্যবাদ!

— বাচেট

Answer 6

আমি মনে করি এটি বোতামটি "সক্রিয়" অবস্থা।

Comments

এটি সক্রিয় রাষ্ট্র হতে হবে, আপনি তার জন্য সঠিক +1। তবে আমি এটি সঠিকভাবে কাজ করতে

— পাইনি

"আমি মনে করি" একটি উত্তর নয়।

— shinzou

Answer 7

আপনার বোতামে সহজ শৈলী যুক্ত করুন

.btn {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}