inputの枠線を消したい

Question

前提・実現したいこと

inputの立体感を無くしたい

発生している問題・エラーメッセージ

Airbnbサイトの模写をしています。
inputの立体感が出て、横のアイコンとぎこちなさが生まれています。
文字を打つときにアイコンは消したくないのでinputタグの中に入れていません。

該当のソースコード

<form class="form-inline">
            <div class="input-group align-item-center">
                <div class="input-group-prepend">
                     <span class="input-group-text border-0" id="basic-addon1"><i class="fa fa-search"></i></span>
                </div>
                <input type="text"  class="form-control" placeholder="探す" aria-label="探す" aria-describedby="basic-addon1" size="50">
            </div>
        </form>

--------CSS------------

.input-group {
    height: 48px;
    border: 1px solid #ebebeb;
    border-radius: 4px;
    box-shadow: 0 1px 2px  lightgrey;
}

.form-control {
    border: none!important;
    padding: 0;
    margin: 5px 0;
    box-shadow: none!important;
    z-index: 0;
}


.input-group-prepend {
    padding: 0;
}

.input-group-prepend {
    display: flex;
}

.input-group-text {
    background-color: #fff;
    font-size: 18px;
}

試したこと

inputタグに対して border: noneやsolid 0px はダメでした。
box-shadow: noneもダメでした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[yoshinavi]

提示のコードでは、inputの立体感は無いのでは？

[退会済みユーザー]

画像に示した様な表示になってしまっているんです。

[yoshinavi]

提示のコードでは、提示の画像みたいには、なりません。

その他のコードも併せて、症状が再現するコードを、提示してください。

Answer 1

Bootstrap が効いてないか、バージョン違いじゃないでしょうか。

最新の Bootstrap をあてたら枠線はきれいにきえましたよ。

サンプル codepen
inputの枠線を消したい

Answer 2

クラス名からするとBootstrapのようですが、Bootstrapで何かがかかっていないか確認が必要かもしれません。

このTeratailのタイトルバーにある検索枠も同様な構成ですが、border: noneで問題なく枠が消えているようです。

Comments

[退会済みユーザー]

お返事ありがとうございます。

確認してみましたが、かかっていないものが見当たりません。。