0

我尝试调整 CSS 编码，但没有成功。我想要的东西：

  • 边框半径为 5px 的搜索框
  • 放大搜索图标而不让它消失
  • 搜索框和搜索图标均匀地放置在 div 周围

HTML 代码：

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

代码：

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

1 回答 1

0

注意：你的 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/

希望这可以帮助 ：）

于 2013-12-23T07:35:55.583 回答