Question

我有一个用 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>

感谢您的帮助！

Answer 1

要从右向左更改大小，您必须使用 direction: rtl; Adjust it 移动整个页面。

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>

如何打开左侧的搜索栏

1 个答案: