Mtu449 score 13
2019/01/26 18:59 投稿
| オートコンプリートの背景色を透明にしたい。 |
| オートコンプリートの背景色を透明にしたいのですが、黄色のまま変わりません。普通に検索する時は透明のままです。 |
| ```css |
| .search_container{ |
| box-sizing: border-box; |
| position: relative; |
| border: 1px solid #999; |
| padding: 3px 10px; |
| border-radius: 20px; |
| height: 3em; |
| width: 300px; |
| overflow: hidden; |
| } |
| .search_container input[type="text"]{ |
| border: none; |
| height: 2.6em; |
| background: none; |
| color:white; |
| } |
| .search_container input[type="text"]:focus { |
| outline: 0; |
| } |
| .search_container input[type="submit"]{ |
| cursor: pointer; |
| font-family: FontAwesome; |
| font-size: 1.7em; |
| border: none; |
| background: none; |
| color: #3879D9; |
| position: absolute; |
| width: 1.5em; |
| height: 2.2em; |
| right: 0; |
| top: -10px; |
| outline : none; |
| } |
| ``` |
| ```html |
| <form method="get" action="{{ route('posts.search') }}" class="search_container"> |
| <div class="input-group"> |
| <input type="text" size="30" placeholder="キーワード検索" name="search" > |
| <input type="submit" value="" > |
| </div> |
| </form> |
| ``` |
| 同じような悩みを検索し、 |
| input:-webkit-autofill { |
| -webkit-box-shadow: 0 0 0px 1000px transparent inset; |
| } |
| または、 |
| input:-webkit-autofill { |
| background:rgba(255,255,255,0) !important; |
| } |
| を記載してみたのですが、うまくいきませんでした。 |
| 回答お待ちしております。 |
