0

我在这里遇到了一个可扩展的搜索表单的困境。这是我的代码： http: //jsfiddle.net/pDVvK/下面是触发扩展的 css 部分

    input[type=search] {
    border: solid 1px #ccc;
    padding: 10px 60px 10px 32px;
    width: 55px;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    -webkit-box-shadow: 0 1px 1px #eae9e9;

    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
}
input[type=search]:focus {
    width: 100px;
    background-color: #fff;
    border-color: #6dcff6;
    -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
    -moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
    box-shadow: 0 0 5px rgba(109,207,246,.5);
}

如您所见，聚焦时它向右扩展[直到设定的宽度]，但我想要实现的是相同的效果，但向左扩展。我曾尝试仅使用填充来实现这一目标，但我做不到。

关于如何达到预期效果的任何想法？

4

1 回答 1

0

这是粗略的编辑 http://jsfiddle.net/tousif123/pDVvK/2/

只需将搜索框括在一个 div 中并使搜索框向右浮动

input[type=search] {
float:right;
}

这是整个代码：- 

.form-holder {
	float: right;	
}

/* reset webkit search input browser style */
input {
	outline: none;
}
input[type=search] {
	-webkit-appearance: textfield;
	-webkit-box-sizing: content-box;
	font-family: inherit;
	
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
	display: none; /* remove the search and cancel icon */
}

/* search input field */
input[type=search] {
    float:right;
	border: solid 1px #ccc;
	padding: 10px 60px 10px 32px;
	width: 55px;
	
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;

	-webkit-box-shadow: 0 1px 1px #eae9e9;
	
	-webkit-transition: all .5s;
	-moz-transition: all .5s;
	transition: all .5s;
    
}
input[type=search]:focus {
	width: 100px;
	background-color: #fff;
	border-color: #6dcff6;
	-webkit-box-shadow: 0 0 5px rgba(109,207,246,.5);
	-moz-box-shadow: 0 0 5px rgba(109,207,246,.5);
	box-shadow: 0 0 5px rgba(109,207,246,.5);
}

/* placeholder */
input:-moz-placeholder {
	color: #999;
}
input::-webkit-input-placeholder {
	color: #999;
	font-size: 13px;
	margin-top: 10px;
}

.form_wrap
{
    width:250px;
}
}
<div class="form_wrap">    
<form>
        <input type="search" placeholder="Search">
</form>
 </div>

于 2013-06-29T18:59:47.293 回答