Question

我尝试调整CSS编码并没有占上风。我想要的东西：

边框半径为5px的搜索框
放大搜索图标而不显示
搜索框和搜索图标均匀放置在div

HTML CODE：

        <div class="search"
        <div class="searchbox">
            <form action="/search" method="get" class="search_form">
            <input type="text" value="Search Blog..." class="search_text" name="q">
            <input type="image" src="http://s25.postimg.org/d3fu892zz/search_button_without_text_md.png" height="20" width="20"class="button">
            </form>
        </div>
    </div>

CSS代码：

.search{position:fixed;
    height:25px;
    width:194px;
    top:189px;
    left:14px;
    border:2px solid black;
    background-color:black;
    border-radius:10px;
    padding-left:2px;
    padding-bottom:4px;
    opacity:.8;}

Answer 1

注意：您的class =“search”div未关闭!!

以下代码应该可以使用并满足您的所有三个条件

<div class="search">
<div class="searchbox">
    <form action="/search" method="get" class="search_form">
        <input type="text" value="Search Blog..." class="search_text" name="q">
<input type="image" src="http://i42.tinypic.com/fayl43.png" class="button">
    </form>
</div>

Css代码：

.search{position:absolute;
height:28px;
width:190px;
top:140px;
left:100px;
border:2px solid black;
background-color:black;
border-radius:10px;
padding-left:2px;
padding-bottom:4px;
opacity:.8;
}

form#input{
    display:inline-block;
}

.searchbox{

}

.search_text{
    margin-top:4px;
    margin-left:5px;
    border-radius:5px;
    text-align:center;
}

.button{
    margin-top:5px;
    margin-left:2px;
    position:absolute;
    height:20px;
    width:20px;
}
.button:hover{
    -webkit-transform:scale(1.3);
            -moz-transform:scale(1.3);
            -o-transform:scale(1.3);
            opacity: 3;

}

工作JSfiddle演示 - http://jsfiddle.net/vg8Mn/

希望这会有所帮助：）

无法更改搜索框属性

1 个答案: