アイコンをクリック・タップで検索窓が横に伸びるにしたい

##前提・実現したいこと

ヘッダーにアイコンを設置して、アイコンをタップorクリックすると検索窓が横に広がる機能をつけたいと考えています。

そのため、こちらのサイト「https://bgt-48.blogspot.com/2018/12/blog-post.html」を参考に、サイトのイメージに合うように調整していました。（色やサイズなど）

##発生している問題
実際にタップやクリックすると参考サイトに用に広がらず、画像のような形になってしまいます。（図の左側）

##該当のソースコード

<!DOCTYPE html>
<html>
<head>
<style>
.luxbar-fixed {
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
}
.luxbar-hamburger span, .luxbar-hamburger span::before, .luxbar-hamburger span::after {
	display: block;
	height: 2px;
	width: 26px;
	transition: 0.6s ease
}
.luxbar-checkbox:checked ~ .luxbar-menu li .luxbar-hamburger span {
	background-color: transparent
}
.luxbar-checkbox:checked ~ .luxbar-menu li .luxbar-hamburger span::before, .luxbar-checkbox:checked ~ .luxbar-menu li .luxbar-hamburger span::after {
	margin-top: 0
}
.luxbar-header {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height: 58px
}
.luxbar-menu-left .luxbar-navigation, .luxbar-menu-left .luxbar-header {
	justify-content: flex-start
}
.luxbar-menu-right .luxbar-hamburger {
	margin-left: auto
}

.luxbar-menu {
	min-height: 58px;
	transition: 0.6s ease;
	width: 100%
}
.luxbar-navigation {
	display: flex;
	flex-direction: column;
	list-style: none;
	padding-left: 0;
	margin: 0
}
.luxbar-menu a, .luxbar-item a {
	text-decoration: none;
	color: inherit;
	cursor: pointer
}
.luxbar-item {
	height: 58px
}
.luxbar-item a {
	padding: 18px 24px 18px 24px;
	display: block
}
.luxbar-hamburger {
	padding: 18px 24px 18px 24px;
	position: relative;
	cursor: pointer
}
.luxbar-hamburger span::before, .luxbar-hamburger span::after {
	content: '';
	position: absolute
}
.luxbar-hamburger span::before {
	margin-top: -8px
}
.luxbar-hamburger span::after {
	margin-top: 8px
}
.luxbar-checkbox {
	display: none
}
.luxbar-checkbox:not(:checked) ~ .luxbar-menu {
	overflow: hidden;
	height: 58px
}
.luxbar-checkbox:checked ~ .luxbar-menu {
	transition: height 0.6s ease;
	height: 100vh;
	overflow: auto
}

@media screen and (min-width: 768px) {
.luxbar-navigation {
	flex-flow: row;
	justify-content: flex-end;
	margin-bottom: 50px;
}
.luxbar-hamburger {
	display: none
}
.luxbar-checkbox:not(:checked) ~ .luxbar-menu {
	overflow: visible
}
.luxbar-checkbox:checked ~ .luxbar-menu {
	height: 58px
}
.luxbar-menu .luxbar-item {
	border-top: 0
}
.luxbar-menu-right .luxbar-header {
	margin-right: auto
}
}
.luxbar-checkbox:checked+.luxbar-menu .luxbar-hamburger-doublespin span::before {
	transform: rotate(225deg)
}
.luxbar-checkbox:checked+.luxbar-menu .luxbar-hamburger-doublespin span::after {
	transform: rotate(-225deg)
}
.luxbar-checkbox:checked+.luxbar-menu .luxbar-hamburger-spin span::before {
	transform: rotate(45deg)
}
.luxbar-checkbox:checked+.luxbar-menu .luxbar-hamburger-spin span::after {
	transform: rotate(-45deg)
}

.luxbar-menu-material-green, .luxbar-menu-material-green .dropdown ul {
	background-color:#31AA64;
	color: #fff
}
.luxbar-menu-material-green .active, .luxbar-menu-material-green .luxbar-item:hover {
	background-color:#2CD53A;
}
.luxbar-menu-material-green .luxbar-hamburger span, .luxbar-menu-material-green .luxbar-hamburger span::before, .luxbar-menu-material-green .luxbar-hamburger span::after {
	background-color: #fff
}

.search-form {
  display: block;
  position: absolute;
  top:4px;
}
.search-form:before, .search-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 3em;
  height: 3em;
  margin: 0;
  border-radius: 1.5em;
  font-size: 1em;
}
.search-form:before {
  z-index: 100;
  line-height: 3em;
  background: #31AA64;
  color: #FFF;
  text-align: center;
}
.search-text {
  opacity: 0;
  z-index: 200;
  cursor: pointer;
  transition: .5s;
  outline: 0;
  border: solid 1px #ccc;
  border-radius: 1.5em;
  padding-left: 1em;
}
.search-text:focus {
  opacity: 1;
  width: 100%;
  cursor: text;
}
.search-form input[type="submit"] {
  display: none;
}
</style>
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
</head>

<header id="luxbar" class="luxbar-fixed">
  <form method="get" class="fa fa-search search-form" action="" id="" action="">
    <input type="search" placeholder="フリーワードを入力" value="" name="q" class="search-text" />
    <input type="submit" value="Search" />
  </form>
  <input type="checkbox" class="luxbar-checkbox" id="luxbar-checkbox"/>
  <div class="luxbar-menu luxbar-menu-right luxbar-menu-material-green">
    <ul class="luxbar-navigation">
      <li class="luxbar-header">
        <label class="luxbar-hamburger luxbar-hamburger-doublespin" id="luxbar-hamburger" for="luxbar-checkbox"><span></span></label>
      </li>
      <li class="luxbar-item"><a href="aaaa.html">aaaa</a></li>
      <li class="luxbar-item"><a href="bbbb.html">bbbb</a></li>
      <li class="luxbar-item"><a href="cccc.html">cccc</a></li>
      <li class="luxbar-item"><a href="dddd.html">dddd</a></li>
      <li class="luxbar-item"><a href="eeee.html">eeee</a></li>
      <li class="luxbar-item"><a href="ffff.html">ffff</a></li>
      <li class="luxbar-item"><a href="gggg.html">gggg</a></li>
    </ul>
  </div>
</header>
</html>

##自分で調べたことや試したこと
最初は元々あったCSSが邪魔してるのかと思い「:not」を使ったり、emをpxに変更してみたりしましたが、思う通りにはなりませんでした。

行動規範の内容に同意します

回答1件

ベストアンサー

親の .search-form に position: absolute; を設定しているため、幅が0になっています。
子の.search-textに width: 100%;としても親の幅と同じにしろということなので、幅は0のままです。

.search-form に幅を設定すればその幅まで広がるようになります。

css
1.search-form {
2  display: block;
3  position: absolute; 
4  top:4px;
5  width: 100%; /* 追加 */
6}

投稿2021/10/27 06:13

hatena19

総合スコア33699

yuuki0222

2021/10/27 06:40

実際に width: 100%;を加えたら理想の形になりました！ありがとうございます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

アイコンをクリック・タップで検索窓が横に伸びるにしたい

関連した質問