Jquery<；选择>；css

我正在尝试构建一个带有邮件的移动应用程序，您可以在其中选择一条示例消息。我的问题是，当你点击“选择消息”（选择的开头）时，会出现一个弹出窗口，你选择了消息。但我无法（或只是不知道如何）改变这个弹出窗口的外观。。。有人知道吗？ 我的代码：

JavaScript:

function selection(select) {
    var valeur = select.options[select.selectedIndex].value;
    if(valeur !="Messages Pré-enregistrés")
        document.getElementById("basic").value = valeur;

}

<div id="ContenuBasic">
    <label for="basic">Votre message:</label>
    <input type="text" name="basic" id="basic" value="">    
</div>

<select onchange="selection(this)">
    <option value="">Choisissez un message</option>
    <option value="Pneu crevé">Pneu crevé</option>
    <option value="Batterie morte">Batterie morte</option>
    <option value="Accident">Accident</option>
    <option value="Flic">Flic</option>
</select>

HTML:

function selection(select) {
    var valeur = select.options[select.selectedIndex].value;
    if(valeur !="Messages Pré-enregistrés")
        document.getElementById("basic").value = valeur;

}

<div id="ContenuBasic">
    <label for="basic">Votre message:</label>
    <input type="text" name="basic" id="basic" value="">    
</div>

<select onchange="selection(this)">
    <option value="">Choisissez un message</option>
    <option value="Pneu crevé">Pneu crevé</option>
    <option value="Batterie morte">Batterie morte</option>
    <option value="Accident">Accident</option>
    <option value="Flic">Flic</option>
</select>

---

您不能真正使用css来设置

select

元素的样式。使用javascript，您可以使用常规DOM元素（如div）来“重新创建”select元素

一些插件已经存在以实现这一点，例如，看看

我发现了如何做到这一点（不是攻击现有的插件，你是对的…）这不是神话般的，但它正在工作

HTML:

<div id="ContenuBasic">
<label for="basic">Your message:</label>
<input type="text" name="basic" id="basic" value="">

</div>

<a href="#" data-width="400" data-rel="popup_name" class="poplight">Messages Pré-enregistrés</a>
<div id="popup_name" class="popup_block">
<div class="message " id="msg1" >Choose a message</div>
<div class="transition"></div>
<div class="message" id="img1" ><p>Message1</p></div></a>
<div class="transition"></div>
<div class="message" ><p>Message2</p></div>
<div class="transition"></div>
<div class="message" ><p>Message3</p></div>
<div class="transition"></div>
<div class="message" ><p>Message4</p></div>


</div>  

CSS

---

您想知道，如何显示弹出窗口或更改弹出窗口的样式？？？表单输入元素故意难以设置样式，以便它们保持其操作系统的外观。在这样的情况下，我不使用本机元素。创建您自己的自定义弹出窗口，按照您喜欢的样式设置，然后创建一个

onclick

方法，将选择设置为隐藏表单字段以保留选择。有时候，创建自己的解决方案比破解现有解决方案要好。

$(document).ready(function(){$('.message').click((function(){

var val = $(this).text();
if(val !="Choisir un message pré-écrit")
document.getElementById("basic").value = val;
$('#fade , .popup_block').fadeOut(function() {
        $('#fade, a.close').remove();  
});
}));});

#fade { 
display: none; 
background: #cecece;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999;
}

a:link, a:visited {
font-family : 'Open Sans';
font-weight: 200;
text-decoration : none;
}
img.btn_close {
float: right;
}
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}

#msg1{
font-family : 'Open Sans';
font-weight: bold;
color: #3797d3;
margin-left : 20px;
margin-top : 10px;
}
#msg1:hover{
background-color : transparent;
}

.message p{
margin-top:8px;
padding-left : 30px;
}
.message{
width : 400px;
height : 50px;
padding-top:10px;
font-family : 'Open Sans';
font-weight: 200;
}

#basic
{
width: 100%;
}


#img1{
height : 80px;

}
.message:hover{
background-color : #3797d3;
color:white;
}

.transition{
width : 400px;
height : 1px;
background-color : #cecece;
}





.popup_block{
display: none; 
background: #fff;
border: 2px solid #cecece;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
-webkit-border-radius: 1px;
-moz-border-radius: 1px;
border-radius: 1px;
}