CSS搜索框如何保持它響應

HTML：

<div class="span12"> 
    <div id='search-box'> 
     <form action='/search' id='search-form' method='get' target='_top'> 
      <input class='search-text' name='q' placeholder='Search by name' type='text'/> 
      <button id='search-button' type='submit'>src</button> 
     </form> 
    </div> 
</div>

CSS：

#search-box { 
    width:100%; 
    height:44px; 
    background:#ffd965; 
    border-bottom:1px solid #fff; 
    display:block; 
} 

#search-form { 
    positoin:absolute; 
    left:16px; 
    right:16px; 
    width:100%; 
    height:30px; 
    background-color:#fff; 
    display:block; 
    -webkit-border-radius: 10px; 
    -moz-border-radius: 10px; 
    border-radius: 10px; 
} 

#search-text { 
    width:100%; 
    height:25px; 
    background: transparent;  
} 

#search-box input[type="text"] { 

} 

#search-button { 
    position: absolute; 
    top: 0; 
    left: 15px; 
    height: 42px; 
    width: 30px; 
    text-align: center; 
    border-width: 0; 
    background-color: transparent ; 
    background-image:url('../images/search.png'); 
    background-repeat:no-repeat; 
}

，我的代碼是：JSFiddle

來源

2014-03-07 iDev Technolab

丟失你的形象。 – Shannon

使用MediaQueries.Are您是開發人員？Designer？ –

你應該詳細說明你正在尋找的行爲。 – Shannon

試試這個

.search-text { 
    width:50%; 
}

看到這個

http://jsfiddle.net/La9r6/2/

來源

2014-03-07 06:02:53

Jay，它會在響應後顯示一半大小的搜索框。如果她使用已經設置爲50％的class =「span6」。但是，搜索框必須在50％div – LOTUSMS

內保持100％，您現在可以將上述寬度修改爲100％或您要設置的任意大小。看到這個http://jsfiddle.net/La9r6/3/ –

我需要它100％就像手機搜索框。和10px邊距從這兩個大小（左和右） –

CSS搜索框如何保持它響應

回答

相關問題