1

入力ボックスの横にタグを使用しています。両方に内側のボックスの影が与えられていますが、問題は、全体を 1 つのアイテム (テキスト ボックス) のように見せる必要があるため、テキスト ボックスの左側の影を削除する必要があることです。

これで、input と a タグの間に線が表示されます。その行を削除するにはどうすればよいですか (tat は影です)

これがデモhttp://jsfiddle.net/jBeqk/です

4

4 に答える 4

1

私があなたを正しく理解していれば、ボタンとして立つ入力とリンクの間の薄い影を削除したいと考えています。

したがって、私はこれを得るためにあなたのフィドルを修正しましたhttp://jsfiddle.net/jBeqk/75/

入力とリンクの両方で影のプロパティを変更しました

入力：

webkit-box-shadow: inset 1px 2px 1px #c3c1bb; 
box-shadow: inset 1px 2px 1px

リンク：

-webkit-box-shadow: inset -1px 2px 1px #c3c1bb;
box-shadow: inset -1px 2px 1px #c3c1bb;

最初のパラメーターを変更して、入力用に「1px」、リンク ボタン用に「-1px」に設定して、影がそれぞれ左と右から来るようにしました。

よろしく。

于 2012-09-14T10:21:45.600 に答える
0

負の拡散半径を試してください:

input[type="text"]{box-shadow: inset 0 3px 0px -1px #C3C1BB;}
.search_indexclose{box-shadow: inset -2px 5px 0px -3px #C3C1BB;}
于 2012-09-14T10:43:40.027 に答える
0

この値を box-shadow に使用します

inset 0px 3px 1px -1px #c3c1bb

負のスプレッド (4 番目の値) を追加し、スプレッドの量を追加して x 値を均等化します。

http://jsfiddle.net/HerrSerker/jBeqk/79/

于 2012-09-14T10:23:15.310 に答える
0

こんにちは sowmya 今、あなたはこれを行うことができます

入力テキストボックスの左枠を削除

input[type="text"]{
-webkit-box-shadow: inset 1px 2px 1px #c3c1bb; 
box-shadow: inset 1px 2px 1px #c3c1bb;
}

または2番目のオプションはこれです

input[type="text"]{
-webkit-box-shadow: inset 0 2px 1px -1px #c3c1bb; 
box-shadow: inset 0 2px 1px -1px #c3c1bb;
}

ライブデモ

--------------------------------------

----------------------------------------------

入力とボタンの影を完全に削除する場合

このCSSを適用するよりも

input[type="text"]{
    -webkit-box-shadow: inset 1px 2px 1px #c3c1bb; box-shadow: inset 1px 2px 1px #c3c1bb;
}
    .search_indexclose{
        -webkit-box-shadow: 0 4px 1px -2px #C3C1BB inset;    
        box-shadow: 0 4px 1px -2px #C3C1BB inset;
    }

このデモは

于 2012-09-14T10:09:39.987 に答える