मैं एक प्रतिक्रिया आवेदन का निर्माण कर रहा हूँ और एकाधिक डेटा चयन के लिए एक चुनिंदा टैग का उपयोग कर रहा हूँ हालांकि चयन टैग ठीक काम करता है लेकिन इस टैग में उपस्थिति में एक समस्या है

  • क्रोम में उपस्थिति यहां छवि विवरण दर्ज करें

  • सफारी में उपस्थिति यहां छवि विवरण दर्ज करें

इस लिंक में यह कहता है कि दोनों में सपोर्टिव टैग है ब्राउज़र। क्या इसे ठीक करने का कोई तरीका है

1
Usama Abdul Razzaq 5 जुलाई 2021, 17:47

2 जवाब

सबसे बढ़िया उत्तर

आप appearance-none का उपयोग कर सकते हैं जो कि tailwindCSS में एक वर्ग है जो किसी भी ब्राउज़र विशिष्ट स्टाइल को हटा देता है।

संसाधन: https://tailwindcss.com/docs/appearance

1
Ineza Bonté Grévy 8 जुलाई 2021, 10:34

हाँ, ईमानदार होने के लिए अधिकांश ब्राउज़रों की अपनी डिफ़ॉल्ट शैलियाँ होती हैं। यदि आप कुछ सुसंगत चाहते हैं तो मैं अक्सर सीएसएस का उपयोग करता हूं, निम्न का प्रयास करें और चारों ओर खेलें:

सीएसएस:

/* Reset Select */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  outline: 0;
  box-shadow: none;

  background: white;
  border:1px solid #e7e7e7;
  background-image: none;
}
/* Remove IE arrow */
select::-ms-expand {
  display: none;
}
/* Custom Select */
.select {
  margin:1rem;
  position: relative;
  display: flex;
  width: 20em;
  height: 3em;
  line-height: 3;
  background: #2c3e50;
  overflow: hidden;
  border-radius: .25em;
}
select {
  flex: 1;
  padding: 0 .5em;
  color: #ccc;
  cursor: pointer;
}
/* Arrow */
.select::after {
  content: '\25BC';
  position: absolute;
  top: 0;
  right: 0;
  padding: 0 1em;
  background: #ccc;
  cursor: pointer;
  pointer-events: none;
  -webkit-transition: .25s all ease;
  -o-transition: .25s all ease;
  transition: .25s all ease;
}
/* Transition */
.select:hover::after {
  color: #ffffff;
}

एचटीएमएल:

<div class="select">
  <select name="slct" id="slct">
    <option selected disabled>Choose an option</option>
    <option value="1">CSS</option>
    <option value="2">JS</option>
  </select>
</div>
0
Cold Out There 5 जुलाई 2021, 18:30