css实现文本框和下拉框结合的案例

html 代码部分

<div id="list-name-input" class="list-name-input">
     <select type="text" class="list-select" id="list-select">
         <option value="">
         </option>
         <option value="0">
             000000
         </option>
<option value="1">
             111111
         </option>
<option value="2">
             222222
         </option>
     </select>
     <input type="text" class="name item-width list-name-for-select" id="list-name-for-select">
 </div>

CSS 部分代码

 <style type="text/css">
   .list-name-input{
    color: #333;
    font-family: tahoma, 'Microsoft YaHei', 'Segoe UI', Arial, 'Microsoft Yahei', Simsun, sans-serif;
    font-size: 15px;
    font-weight: bold;
    height: 50px;
    margin: 0px;
    padding: 0px;
    position: relative;
    width: 530px;
   }
   .list-name-for-select{
    border:;
    color: #555;
    height: 20px;
    lighting-color: rgb(255, 255, 255);
    line-height: 20px;
    margin:0 0 10px 0;
    outline-color: #555;
    outline-offset: 0px;
    outline-style: none;
    outline-width: 0px;
    padding: 4px 6px;
    position: absolute;
    top: 1px;
    left: 3px;
    vertical-align: middle;
    width: 486px;
   }
   .list-name-input-for-select:focus{
    border:;
    border-radius:;
   }
   .list-select{
    background-color: #FFF;
    border:1px #ccc solid;
    border-radius: 4px;
    color: #555;
    cursor: pointer;
    height: 30px;
    left: 0px;
    margin:0 0 10px 0;
    padding: 4px 6px;
    position: absolute;
    top: 0px;
    vertical-align: middle;
    white-space: pre;
    width: 530px;
   }
  </style>

效果图