html - 如何在左侧打开搜索栏
问题描述
我有一个用 CSS 创建的搜索框。当我单击它的图标时,它会显示输入栏。它完美地工作。唯一的问题是当我单击它时,它会在搜索图标的右侧区域打开输入栏。我想将它打开到图标的左侧。我怎么能这样做?
这是我正在使用的代码:
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%
}
input::-webkit-search-cancel-button,
input::-webkit-search-decoration {
display: none;
}
input[type=search] {
background: var(--search-color);
border: solid 1px var(--bg-color);
width: 55px;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s
}
input[type=search]:focus {
width: 130px;
background-color: #fff;
border-color: #66cc75;
-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)
}
#sv2 input[type=search] {
width: 24px;
padding-left: 10px;
color: transparent;
cursor: pointer;
outline: 0
}
#sv2 input[type=search]:hover {
background-color: var(--bg-color)
}
#sv2 input[type=search]:focus {
width: 160px;
padding-left: 32px;
color: var(--font-color);
background-color: var(--bg-color);
cursor: auto
}
#sv2 input:-moz-placeholder {
color: transparent
}
#sv2 input::-webkit-input-placeholder {
color: transparent
}
<form method="get" action="https://www.example.com/" id="sv2">
<input name="s" id="s" size="30" type="search" placeholder="Search example.com">
</form>
谢谢你的帮助!
解决方案
要从右到左更改大小,您必须使用direction: rtl;
调整来移动整个页面。
body {
background: #fff;
color: #666;
font: 90%/180% Arial, Helvetica, sans-serif;
width: 800px;
max-width: 96%;
margin: 0 auto;
direction: rtl;
}
a {
color: #69C;
text-decoration: none;
}
a:hover {
color: #F60;
}
h1 {
font: 1.7em;
line-height: 110%;
color: #000;
}
p {
margin: 0 0 20px;
}
input {
outline: none;
}
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}
input[type=search] {
background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
border: solid 1px #ccc;
padding: 9px 10px 9px 32px;
width: 55px;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
input[type=search]:focus {
width: 130px;
background-color: #fff;
border-color: #66CC75;
-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);
}
input:-moz-placeholder {
color: #999;
}
input::-webkit-input-placeholder {
color: #999;
}
/* Demo 2 */
#demo-2 input[type=search] {
width: 15px;
padding-left: 10px;
color: transparent;
cursor: pointer;
}
#demo-2 input[type=search]:hover {
background-color: #fff;
}
#demo-2 input[type=search]:focus {
width: 130px;
padding-left: 32px;
color: #000;
background-color: #fff;
cursor: auto;
}
#demo-2 input:-moz-placeholder {
color: transparent;
}
#demo-2 input::-webkit-input-placeholder {
color: transparent;
}
<h1>Expandable Search Form</h1>
<p>Pen by <a href="http://textfaces.wtf">Prinzadi</a></p>
<h3>Demo 1</h3>
<form>
<input type="search" placeholder="Search">
</form>
<h3>Demo 2</h3>
<form id="demo-2">
<input type="search" placeholder="Search">
</form>
或者通过使用 设置输入position: absolute;
和设置right:0
; 来调整它。
body {
background: #fff;
color: #666;
font: 90%/180% Arial, Helvetica, sans-serif;
width: 100%;
max-width: 96%;
margin: 0 auto;
}
a {
color: #69C;
text-decoration: none;
}
a:hover {
color: #F60;
}
h1 {
font: 1.7em;
line-height: 110%;
color: #000;
}
p {
margin: 0 0 20px;
}
input {
outline: none;
}
input[type=search] {
-webkit-appearance: textfield;
-webkit-box-sizing: content-box;
font-family: inherit;
font-size: 100%;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button {
display: none;
}
input[type=search] {
background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center;
border: solid 1px #ccc;
padding: 9px 10px 9px 32px;
width: 55px;
-webkit-border-radius: 10em;
-moz-border-radius: 10em;
border-radius: 10em;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
input[type=search]:focus {
width: 130px;
background-color: #fff;
border-color: #66CC75;
-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);
}
input:-moz-placeholder {
color: #999;
}
input::-webkit-input-placeholder {
color: #999;
}
#myForm {
position: relative;
width: 160px;
}
#myForm input[type=search] {
position: absolute;
right: 0;
}
<h1>Expandable Search Form</h1>
<p>Pen by <a href="http://textfaces.wtf">Prinzadi</a></p>
<h3>Demo 1</h3>
<form id="myForm">
<input type="search" placeholder="Search">
</form>
推荐阅读
- swift - URL 请求:如何设置保留的标头?
- tfs - 如何从 Microsoft.TeamFoundation.WorkItemTracking.Client 访问 git 提交的消息?
- javascript - 加载dom后如何在Onclick事件中显示警报
- matplotlib - 绘制一阶 ODE 的解及其导数
- git - 从 github 上的存储库创建叉子,但在新的拉取请求中找不到我的叉子
- ios - 在 React Native 0.61 中使用手动链接的库
- java - Java Access Modifiers 关键字(private、default、protected、public 或 final、static 等)在 eclipse 中自动隐藏但在源文件中显示
- python - 如何使用 matplotlib 中设置的自定义数字自定义条形中的颜色?
- ios - 替换所有用户 UIGestures
- python - Pytest - 如何在自定义持续时间内暂停一个测试用例并保持其余测试用例运行?