0

CSS だけでは解決できないような特殊な状況があります。JavaScript や jquery は使用できず、CSS のみを使用できます。CSSしか編集できないWebアプリケーションを扱っています。アプリケーションが提供するフォーム ページの 1 つで、フィールドの 1 つのラベルを変更したいと考えています。ページにはいくつかのフォーム フィールドがあります。私が直面している問題は、フォームの DIV ID が動的に派生することです。ページが読み込まれるたびに、DIV ID が変更されます。以下に示すHTMLがあります。「質問」というテキストを別のものに変更しようとしています。

<div class="sm-form-field-overhead" id="yui_3_8_0_1_1378308546310_339">
<label class="sm-label" id="yui_3_8_0_1_1378308546310_340">The Question</label>
<div class="sm-form-field-container" id="yui_3_8_0_1_1378308546310_231">
    <textarea name="question" class="sm-form-field sm-form-field-textarea " id="yui_3_8_0_1_1378308546310_230"></textarea>
</div>
<div class="sm-form-field-description"></div>

:before セレクターを使用してその前にテキストを追加できますが、これは他のテキストを非表示にせず、ターゲットにしようとしているフォーム フィールドだけでなく、ページ上のすべてのフォーム フィールドをターゲットにします

.sm-form-field-overhead .sm-label:before {
content: "Message";

}

私は運が悪いのでしょうか、それとも解決策があると思いますか?

これが私が思いついた完全で完全なハックです

.sm-form-contents .sm-form-field-overhead:nth-child(4) label {
color: #242528;
padding-left: 182px;
}

これにより、既存のテキストが同じ色になり、邪魔にならないように右に押し出されます

.sm-contact-pro-form:before {
content: "This is the new text";
position: absolute;
top: 215px;
left: 200px;
}

これにより、新しいテキストが所定の位置に追加されます。私が言ったように、完全なハックですが、今のところ機能します。助けてくれてありがとう@Shauna あなたは私を正しい方向に向けさせてくれました。きれいではありませんが、今のところ機能します

4

4 に答える 4

2

うーん、トリッキーな 1 つです。少しハックしたい場合は、次のようにを非表示にlabelして、親divにコンテンツを追加できます。

.sm-label{
    display: none;
}
.sm-form-field-overhead:before {
    content: "Message";
}
于 2013-09-04T15:49:18.783 に答える
1

次のようなことをしたらどうでしょうか。

.sm-form-field-overhead .sm-label:before {
    content: "Message   ";
}

.sm-form-field-overhead .sm-label { 
    display: inline-block; width: 40px; height: 20px; overflow: hidden; 
}

もちろん、幅と高さを推測しているだけですが、表示したくないラベルのテキストを非表示にするだけです。

あまりエレガントではありませんが、ピンチで機能する可能性があります。

于 2013-09-04T15:50:51.680 に答える