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

问题描述：

我试图使用“选择标签”实现下拉菜单，但referal image中的下拉菜单将图像和内容像表格一样对齐。我已经浏览了FAQ，找不到任何相关的答案。正如你所看到的，当你选择一些东西时，它会直接显示写在其中的文本，因为它应该显示图像和内容。请帮助我。在选择标签而不是输入标签中添加图像

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

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; 
 
}

<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> 
 

 

 
\t <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>

[smallimage]文本才有效。这是你需要的格式吗？ – Hash

是的，但中等大小的图像会很好，因为我链接的推荐图片 –

答

你想要什么是不可能的。你将不得不模拟一个选择框。请看下面的例子。

$("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>

这非常有帮助。 –

答

最佳solotuion是，你可以使用一个名为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>

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

相关推荐