4

疑似クラスが適用された1px検索ボックス用のボーダー付き入力フィールドを作成しようとしています。キャッチは、境界線に 1 つの尖った側面があることです。:hover:focus

(http://cl.ly/N357)

inputタグのみでCSSのみを使用してこれを適切に行うことは可能ですか? （疑似クラスを適用するための最も直接的なルートのようです）。

これが私がこれまでに得たものです（ただし、transformChromeでは機能していません..）http://jsfiddle.net/robbschiller/pxytz/

.search {
    width: 30px;
    height: 32px;
    background: #fff;
    border: 1px solid #7d8082;
    border-left: 0;
    position: relative;
}

.search:before {
    content:"";
    position: absolute;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    width: 23px;
    height: 23px;
    border: 1px solid #7d8082;
    border-right: 0;
    border-top: 0;
    right: 63%;
    top: 4px;
}

これは明らかに、問題の一部であるホバーとフォーカスの状態を考慮していません。:before疑似クラスを疑似要素に適用できないと思うので、疑似要素の使用を避けようとしていますか?

4

3 に答える 3

3

それは完全に可能です。変換なしでも実行できます。これにより、:before および :after 疑似クラスをサポートするすべてのブラウザーで機能します。あなたがアプローチしていた方法の問題は、入力要素が :before と :after を使用したコンテンツの挿入を許可しないことです。一部のブラウザーで機能するという事実は、標準ではなく、癖です。そのため、入力を div などでラップする必要があります。http://jsfiddle.net/jamesmfriedman/Zmd8y/

.search {
    display:inline-block;
    height: 32px;
    background: #fff;
    border: 1px solid #7d8082;
    border-left: 0;
    position: relative;
}

.search input {
    width: 30px;
    border:0;
    line-height: 32px;
    height: 32px;
}

.search:before, .search:after {
    content:'';
    position:absolute;
    top:-1px;
    width:0;
    height:0;
    left:-32px;
    border: 17px solid transparent;
}

.search:before {
    left: -34px;
    border-right-color: #7d8082;
}

.search:after {
    border-right-color: white;
    border-width: 16px;
    top:0;
}

.search:hover {
    border-color: #028DC3;
}

.search:hover:before {
    border-right-color:inherit;
}
于 2013-02-21T15:35:10.480 に答える
2

http://jsfiddle.net/jRFNq/

入力フィールドを div で囲むことができます。:before 要素が機能するようになりました。

<div id=wrapper><input class="search"></input></div>

#wrapper:before {
content:"";
position: absolute;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
width: 23px;
height: 23px;
border: 1px solid #7d8082;
border-right: 0;
border-top: 0;
left: 38px;
top: 56px;

}

トランスフォームはその位置を台無しにします。そのため、上と左に注意してください。

于 2013-02-20T20:08:21.517 に答える
0

input[type="search"]またはテキストの場合、 http://jsfiddle.net/pxytz/6/ のようなよく知られた手法で三角形を作成するために使用できますが、編集label後、それはあなたが達成しようとしているものではないことがわかります。

5 つの線形グラデーションでできた線はどうですか? :)
W3C 構文のみ: http://jsfiddle.net/pxytz/8/

于 2013-02-20T21:14:26.260 に答える