अपेक्षित परिणाम: विकल्प से पहले का चिह्न

1

वर्तमान परिणाम: आइकन कहां है?

2

Please Select... या चयनित विकल्प से पहले आइकन कैसे प्रदर्शित करें?

.selectDropDown {
    height: 5em;
    width: 30em;
    background: #f3f3f3;
    border: 1px solid #d2d8d8;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    padding: 16px 20px 16px 50px;
}
<p class="fieldset">
  <div class="form-group">
    <i class="glyphicon glyphicon-menu-down"></i>
    <select class="form-control selectDropDown" id="sel1">
      <option value="" disabled selected hidden>Please select...</option>
      <option>option 1</option>
      <option>option 2</option>
      <option>option 3</option>
    </select>
  </div>
</p>
1
VLeonovs 4 अक्टूबर 2017, 13:21

2 जवाब

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

अब जांचें

आपको bootstrap.min.css, jquery.min.js और bootstrap.min.js फ़ाइल जोड़नी होगी और इस css को सेट करना होगा और यह हो जाएगा

.posab{
        position: absolute!important;
        top: 28px!important;
        left: 10px !important;}
        .form-control.selectDropDown {
    height: 5em;
    width: 30em;
    background: #f3f3f3;
    border: 1px solid #d2d8d8;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    padding: 16px 20px 16px 50px;
    opacity:0.7;
}
.form-group{
position:relative;}
.posab{
    position: absolute!important;
    top: 28px!important;
    left: 10px !important;
    z-index:-1;}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<p class="fieldset">
  <div class="form-group">
    <i class="glyphicon glyphicon-user posab"></i>
    <select class="form-control selectDropDown" id="sel1">
      <option value="" disabled selected hidden>Please select...</option>
      <option>option 1</option>
      <option>option 2</option>
      <option>option 3</option>
    </select>
  </div>
</p>
0
Hiren Vaghasiya 5 अक्टूबर 2017, 07:22

मुझे लगता है कि आपका प्राथमिक प्रश्न यह था कि आप आइकन नहीं देख पा रहे हैं। तो यहाँ यदि आप बूटस्ट्रैप का उपयोग कर रहे हैं जैसे:<span class="glyphicon glyphicon-user"></span> उस स्थिति में, आपने bootstrap.min.css, bootstrap.min.js नहीं जोड़ा है, ये आपके आइकन को लोड करने के लिए शामिल करने के लिए आवश्यक हैं।

यहां वह कॉपी है जहां आइकन दिखाई दे रहा है https://codepen.io/nabanitadasgupta/pen/yzPbjW. आप चाहें तो मैं आइकॉन पोजीशन भी बना सकता हूं।

1
nabanita 4 अक्टूबर 2017, 13:51