特定の入力タイプのラベルにCSSスタイルを設定する方法はありますか？

Question

私は、特定のフォームのラベルに設定された次のスタイルがあります。

#incidentForm label { 
    font-weight:bold; 
    width:40%; 
    vertical-align:top; 
} 

私は私の完全なページのフォームに必要正確に何です。しかし、誰かがデータの結果を見ることができるレポートから1つのフィールドを更新できるようにするためには、TEXTAREAのみのラベルを "width：40％"に限定しないことをお勧めします。他のすべての入力タイプは "width：40％"を保持する必要があります。

私は、既存のラベルスタイルの例外ではない、またはモーダルのクラスに基づいて別のスタイルを設定する方法について、私の頭脳を覆そうとしています。 IE：

<div id="Return" class="updateModal"> 
    <div id="incidentForm"> 
    <div class="[name of this incident form type]"> 
     <form class="AjaxForm" action="https://blahblahblah" method="post"> 
     <fieldset id="fs1"> 
      <legend>Edit report field</legend> 
      <div class="field"> 
      <label for="31">This is the label for this text area field:</label> 
      <textarea id="31" name="31"></textarea> 
      </div> 
     </fieldset> 
     <input value="Update record" type="submit"> 
     </form> 
    </div> 
    </div> 
</div> 

をTextAreaのidとは、したがってのラベルは、に基づいて動的に生成されることに注意してください：ここでは

.updateModal label(that somehow identifies only textareas) { 
    width:100%; 
} 

自体をモーダル更新の構成の一例ですフォーム情報が引き出されるデータベースのidフィールド。すべてのフィールド情報はdbに格納されるので、特定のテキストエリア自体のIDに基づいて特定のスタイル定義を生成することはできません。少なくとも、私は考えることができない。

誰にも提案はありますか？

ありがとうございました！

Answer 1

私は作業するコードはありませんが、もしそれを含めるとしたら、textareaに使用されているラベルにCSSクラスを追加できるはずです。バックエンドコードがデータベース情報を使用してフォームフィールドに使用する要素を決定する場合は、そのロジックを使用してクラスを追加します。そうでない場合は、HTMLを書き込むときに追加します。

Answer 2

あなたは選択して要素の属性には、次のを使用することができます。

input[type="text"] { 
    background-color: yellow; 
} 

Answer 3

セレクタが複数の場合は

label[for=xxx] 
{ 
    /* ...definitions here... */ 
} 

ようにする必要があり、あなたがあなたのセレクタをより簡単にし、ためを一般化することができます最新のブラウザ：

label[for^="3"] { 
    color: red; //It will apply to all label that starts with "3" 
} 

または単にあなたが書くことができます。

label[for="31"],label[for="32"],label[for="and so on.."] { 
    color: red; 
} 

や一般的なラベルのを単にまた

<script> 
$(document).ready(function(){ 
    $("textarea").siblings('label').css("width", "100%"); 
}); 
</script> 

、あなたが以下のようにjQueryで兄弟機能で簡単にこれを達成することができます

label { 
    color: red; //It will affect to all the label in the page 
} 

Answer 4

を書きます助けがあれば、この答えをチェックしてください。https://stackoverflow.com/a/27993987/4874281

Answer 5

CSSの場合、セレクタの件名はセレクタ全体の最後の複合セレクタ（https://www.w3.org/TR/selectors4/#subject）です。 CSS4には、これを可能にする新しいサブジェクトセレクタがあります。それはのように見えます：label! + textarea。!は、labelセレクタがこのセレクタの対象であることを意味します。

残念ながら、これはどのブラウザでも実装されていません（http://css4-selectors.com/selector/css4/subject-of-selector-with-child-combinator/）。それを考えると、子孫、子供、そして兄弟を探す能力しかありません。

HTMLを制御する能力がある場合は、フォーム要素とラベルのDOM順序を反転するとtextareaの若い兄弟になります。これにより、隣接する+セレクタを使用するオプションが提供されます。視覚的な順序は、逆方向のフレックスボックスを使用することによって変更することができます。考えてみましょう：

<div class="field"> 
    <textarea id="f1">My textarea</textarea> 
    <label for="f1">My Label</label> 
</div> 
<div class="field"> 
    <input type="text"> 
    <label for="f1">My Label</label> 
</div> 

.field { 
    display: flex; 
    flex-direction: column-reverse; 
    margin: 1em; 
} 

textarea + label { 
    background: #faa; 
} 

デモ：https://codepen.io/honzie/pen/weMRam

要約すると：（1）それはCSS2.1/3で可能ですか？現在のHTMLではありません。 （2）CSS4で可能ですか？（ブラウザはそれを実装していて、仕様は変わらないと仮定します）はい、将来的に。