আইপ্যাড এবং আইফোনের জন্য স্টাইলিং ইনপুট বোতাম


215

আমি আমার ওয়েবসাইটে ইনপুট বোতামগুলি স্টাইল করতে সিএসএস ব্যবহার করছি তবে আইওএস ডিভাইসগুলিতে স্টাইলিংটি ম্যাকের ডিফল্ট বোতামগুলির দ্বারা প্রতিস্থাপিত হয়েছে। আইওএসের জন্য স্টাইল বোতামগুলির কোনও উপায় আছে, বা একটি হাইপারলিঙ্ক তৈরি করার কোনও উপায় যা সাবমিট বাটনের মতো আচরণ করে?

উত্তর:


524

আপনি খুঁজছেন হতে পারে

-webkit-appearance: none;
  • সাফারি সিএসএস নোট চালু আছে -webkit-appearance
  • মজিলা বিকাশকারী নেটওয়ার্ক -moz-appearance

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

6
আপনি SCSS ব্যবহার করেন, তাহলে ব্যবহার@include experimental(appearance, none);
স্যাম Soffes

1
উপরের লিঙ্কটি এখন মারা গেছে, দুর্ভাগ্যক্রমে ( চিন্তাভাবনা / ডিজাইন /… )।
Per Quested Aronsson

<select>এটির সাথে একটি সমস্যা হ'ল বাক্সগুলির জন্য , ডেস্কটপ ব্রাউজারে থাকা অবস্থায় এটি তীরটি প্রদর্শন করে না। সুতরাং আমি মনে করি এমন মিডিয়া ক্যোয়ারির সাথে এটি সর্বোত্তমভাবে জুটিবদ্ধ।
অ্যান্ড্রুউইবার

কি ... সত্যিই কি এত সহজ ছিল? আমি CSSএটি স্টাইল করতে প্রচুর লাইন ব্যবহার করেছি এবং এই লাইনটি কৌশলটি করার জন্য যথেষ্ট ছিল ?!


9

আমি সম্প্রতি এই সমস্যাটি পেরিয়ে এসেছি।

<!--Instead of using input-->
<input type="submit"/>
<!--Use button-->
<button type="submit">
<!--You can then attach your custom CSS to the button-->

আশা করি এইটি কাজ করবে.


3
এটি এখনও আমাকে একটি বোতামের উচ্চতা পরিবর্তন করতে দেয় না। মজার বিষয় যদিও, আমি বাটনটি দেওয়ার সাথে সাথে একটি কাস্টম প্রস্থ কাস্টম উচ্চতাও নেওয়া হবে।
ফ্লু

এটি ইউআইকিট ভি 3-র জন্য স্থির ছিল।
কালব টৌলিয়েন

4

নীচের সিএসএস ব্যবহার করুন

input[type="submit"] {
  font-size: 20px;
  background: pink;
  border: none;
  padding: 10px 20px;
}
.flat-btn {
  -webkit-appearance: none;
  -moz-appearance: none;
   appearance: none;
   border-radius: 0;
}

h2 {
  margin: 25px 0 10px;
  font-size: 20px;
}
<h2>iOS Styled Button!</h2>
<input type="submit" value="iOS Styled Button!" />

<h2>No More Style! Button!</h2>
<input class="flat-btn" type="submit" value="No More Style! Button!" />


0

-উইবকিট-উপস্থিতি: কিছুই নয়;

দ্রষ্টব্য: একটি বোতাম স্টাইল করতে বুটস্ট্র্যাপ ব্যবহার করুন responsive প্রতিক্রিয়াশীলদের জন্য এটি সাধারণ।


0

প্রাইমফেসগুলি (প্রাইমং) এবং কৌণিক using ব্যবহার করে আমার আজ একই সমস্যা ছিল your

p-button {
   -webkit-appearance: none !important;
}

আমি কিছুটা বুটস্ট্র্যাপও ব্যবহার করছি যার একটি রিবুট কোড রয়েছে, এটি এটিকে ওভাররাইড করে (আমাকে কেন যোগ করতে হয়েছিল তা গুরুত্বপূর্ণ!)

button {
  -webkit-appearance: button;

}

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.