Question

我在这里有一个可扩展的搜索表单的困境。这是我的代码：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);
}

正如你所看到的，在焦距上它会向右扩展[直到设定的宽度]，但我想要实现的是同样的效果，但是向左扩展。我曾尝试用填充物来实现这一点，但我无法做到。

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

Answer 1

这是粗略的编辑 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>

可扩展的搜索表单（CSS）

1 个答案: