Question

我尝试使用＆＃34; select-tag＆＃34;来尝试下拉，但referal image中的下拉列表中的图片和内容像表一样对齐。我已查看常见问题解答，无法找到相关答案。正如您所看到的那样，当您选择某些内容时，它会直接显示其中所写的文本，因为它应该显示图像和内容。请帮帮我。

＆＃13;

$(document).ready(function(){
 $('#search_iva').click(function(){
   $('.drp-result').toggle();
 
 });
});

＆＃13;

body {
  background-image: url(images/mac.jpg);
  font-family: 'Montserrat',sans-serif;
}

.container {
  width: 30%;
  margin: 50px auto;
  padding: 50px;
  background: rgba(0, 0, 0, 0.79);
  color: #ffffff;
}

h2 {
  margin-bottom: 50px;
}

.detail {
  display: inline-block;
  position: relative;
  margin-bottom: 40px;
  width: 450px;
}
/*
.detail:after {
  content: "\f002";
  font-family: Fontawesome;
  display: block;
  position: absolute;
  top: 0; 
  right: 0;
 }*/

.detail input, .detail textarea, .detail select {
  display: block;
  border: none;
  border-bottom: 1px solid #fff;
  width: 100%;
  background: none;
  color: #ffffff;
}

option {
  background: rgba(0, 0, 0, 0.8);
}

.detail textarea {
  height: 100px;
  width: 100%;
  overflow: auto;
  resize: none;
}

.detail label {
  position: absolute;
  top: 0px;
  left: 5px;
  font-size: 16px;
  pointer-events: none;
}

.detail .inputBar {
  position: relative;
  display: block;
}

.detail .inputBar:before,
.detail .inputBar:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 0;
  background: red;
  height: 2px;
  transition: all 0.2s ease-in-out;
}

.fa {
  display: inline-block;
}

select {
  outline: none;
  
}





.drp-result:before {
    border: solid transparent;
    content: "\25b2";
    position: absolute;
    pointer-events: none;
    top: -8px;
    left: 597px;
    color: tan;
}

.drp-result {
  display: none;
}

.col {
  display: inline-table;
  margin-right: 2%;
  text-align:center;
}

.col2 {width: 16.6666666667%; vertical-align:middle;}
.col5 {width: 37%;}

.list-item p {
  opacity: 0.6;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css"   href="style.css">
  <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script rel="text/javascript" src="script.js"></script>
</head>


	<div class="container">
    
    <h2>Search what you like</h2>
    
    
    <div class="detail"><select id="search_iva" type="text"><label>I Want to see...</label>
      <option>hello1</option>
     
      <option><div class="list-item" style="margin: 30px 0;">
         <div class="col col2"><img style="width: 100%;" src="https://image.ibb.co/eSOTqQ/1.jpg"></div>
         <div class="col col5"><h4>small doggy</h4></div>
         <div class="col col5"><p>Adopt it and express your love</p></div>
      </div>
        
      </option>
        <option>hello3</option>
      
      <span class="inputBar"></span><!--inputBar-->
 </div>
     
  
 
  <div class="drp-result">
    <div class="result-inner">
      <h2>Categories</h2>
      
      <div class="list-item" style="margin: 30px 0;">
      <a><div class="col col2"><img style="width: 100%;" src="https://image.ibb.co/eSOTqQ/1.jpg"></div>
         <div class="col col5"><h4>small doggy</h4></div>
         <div class="col col5"><p>Adopt it and express your love</p></div>
      </a></div>
      
      <div class="list-item" style="margin: 30px 0;">
      <a><div class="col col2"><img style="width: 100%;" src="https://image.ibb.co/gmkux5/3.jpg"></div>
        <div class="col col5"><h4>women</h4></div>
         <div class="col col5"><p>A picture of laughing women</p></div>
      </a></div>
      
      <div class="list-item" style="margin: 30px 0;">
      <a><div class="col col2"><img style="width: 100%;" src="https://image.ibb.co/bWVoPk/2.jpg"></div>
        <div class="col col5"><h4>pomolion</h4></div>
         <div class="col col5"><p>A rare breed puppy</p></div>
      </a></div>
      
      <div class="list-item" style="margin: 30px 0;">
      <a><div class="col col2"><img style="width: 100%;" src="https://image.ibb.co/eSOTqQ/1.jpg"></div>
         <div class="col col5"><h4>small doggy</h4></div>
         <div class="col col5"><p>Adopt it and express your love</p></div>
      </a></div>
      </div> 
    
    </div><!--container--> 
  </div>

＆＃13;

Answer 1

你想要的是不可能的。您必须模拟一个选择框。请参阅下面的示例。

$("body").on("click", ".selected", function() {
  $(this).next(".options").toggleClass("open");
});

$("body").on("click", ".option", function() {
  $(".selected").html($(this).find("span").html());
  $(".options").toggleClass("open");
});

.container {
  display: flex;
  flex-wrap: wrap;
  width: 25%;
}

.selected {
  border: thin solid darkgray;
  border-radius: 5px;
  background: lightgray;
  display: flex;
  align-items: center;
  cursor: pointer;
  height: 1.5em;
  margin-bottom: .2em;
  padding-left: .5em;
  min-width: 150px;
  position: relative;
}

.selected:after {
  font-family: FontAwesome;
  content: "\f0d7";
  margin-left: 1em;
  position: absolute;
  right: .5em;
}

.options {
  display: none;
  margin: 0;
  padding: 0;
}

.options.open {
  display: inline-block;
}

li {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
}

li>img {
  margin-right: 1em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
  <div class="selected">Select an option</div>
  <ul class="options">
    <li class="option"><img src="http://placehold.it/50/00ff00"><span>Option 1</span></li>
    <li class="option"><img src="http://placehold.it/50/ff0000"><span>Option 2</span></li>
    <li class="option"><img src="http://placehold.it/50/0000ff"><span>Option 3</span></li>
  </ul>
</div>

Answer 2

最好的解决方案是你可以使用名为ddslick

的jquery插件

您可以创建一个下拉列表，例如

添加所需的图像并将选择/选项列表创建为

这样的东西只适用于firefox

<select>
<option value="smalldog1" style="background-image:url(https://image.ibb.co/eSOTqQ/1.jpg);">Small Dog 1</option>
<option value="smalldog2"  style="background-image:url(https://image.ibb.co/gmkux5/3.jpg);">Small Dog 2</option>
<option value="smalldog3" style="background-image:url(https://image.ibb.co/bWVoPk/2.jpg);">Small Dog 3</option>
<option value="smalldog4"  style="background-image:url(https://image.ibb.co/eSOTqQ/1.jpg);">Small Dog 4</option>
</select>

在select标签而不是输入标签中添加图像

2 个答案: