5
मैं < शैली> ड्रॉप डाउन बॉक्स शैली के लिए शुद्ध सीएसएस का उपयोग कर रहा हूं। नीचे दिए गए कोड का उपयोग करके, मैं इसे एक हिचकी के साथ करने में सक्षम हूं: जब विकल्प पर टेक्स्ट बहुत व्यापक हो जाता है, तो यह ड्रॉप डाउन तीर की पृष्ठभूमि छवि से पहले काटा नहीं जाता है।सीएसएस मुद्दों में <select> स्टाइलिंग
जब पाठ बहुत बड़ा है:
मेरा लक्ष्य क्या है चाहते हैं है पाठ तीर छवि ड्रॉप डाउन से पहले काट ताकि वे ओवरलैप नहीं । हालांकि, मैं अब भी पूरा टेक्स्ट की तरह प्रदर्शित करने के लिए होगा जब ड्रॉप डाउन सूची का विस्तार किया जाता है:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Styling Selects</title>
<style type="text/css">
.selectDiv select {
background: transparent;
width: 250px;
padding: 7px;
font-size: 16px;
border: none;
height: 34px;
text-transform: lowercase;
color: #666666;
z-index: 100;
position: absolute;
left: 0px;
top: 0px;
}
.selectDiv {
border: 2px solid #666666;
display: block;
width: 218px;
height: 34px;
overflow: hidden;
position:relative;
display: inline-block;
}
.selectButtonDiv {
width: 16px;
height: 16px;
z-index: 99;
position: absolute;
left: 190px;
top: 9px;
display: inline-block;
background: url("stream_7B0046.png") no-repeat -96px #FFF;
}
</style>
</head>
<body>
<div class="selectDiv">
<div class="selectButtonDiv"></div>
<select>
<option value="Option 1">Option 1</option>
<option value="Option With Really Long Name">Option With Really Long Name</option>
</select>
</div>
</body>
</html>
कैसे मैं पाठ बंद ट्रिम कर सकता है पर कोई भी विचार:
यहाँ कोड है ढहने वाले ड्रॉप डाउन बॉक्स को प्रदर्शित करते समय भी विस्तारित होने पर पूरा टेक्स्ट दिखाएं। यह सब सीएसएस में पूरी तरह से रहते हुए। धन्यवाद!
क्या आपने पैडिंग-सही कोशिश की है? –
पैडिंग-राइट मूल चयन ड्रॉप डाउन तीर के दाईं ओर पैडिंग जोड़ता है, पाठ और तीर के बीच नहीं। इसलिए, यह दूसरे को प्रदर्शित करते समय सामान्य ड्रॉप डाउन तीर को छिपाने की आवश्यकता को हल नहीं करता है। –