CSSを使用してテキスト入力スタイルを削除する

Question

私はいくつかのテキストフォーム要素を持っています。クリックしない限り表示されるプレースホルダテキストだけでdivとしてスタイルを設定したいのですが、CSSクラスを追加して、

.subtask-hideに追加する必要があるCSSは、一度クリックするまで空のdivとして表示されますか？

<style> 
    .subtask { 
     display: block; 
     height: 34px; 
     padding: 6px 12px; 
     font-size: 14px; 
     line-height: 1.42857143; 
     color: #555; 
     background-color: #fff; 
     background-image: none; 
     border: 1px solid #ccc; 
     border-radius: 4px; 
     -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075); 
     box-shadow: inset 0 1px 1px rgba(0,0,0,.075); 
     -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; 
     -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; 
     transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;   
    } 
    .subtask-cancel{ 
     line-height: 34px; 
    } 

    .subtask-cancel-hide { 
     display: none; 
    } 

    .subtask-hide { 

    } 
</style> 

    <div class="form-group col-xs-12"> 
     <div class="col-xs-12"> 
      <div class="col-xs-1"></div> 
      <input type="text" id="AddNewSubTask" name="AddNewSubTask" placeholder="Add New SubTask" class="subtask-hide col-xs-10" onclick="allowInput(this);"> 
      <div id="cancelTask" class="fa fa-times fa-2x col-xs-1 subtask-cancel-hide" aria-hidden="true" onclick="disallowInput(this);"></div> 
     </div> 
    </div> 

<script> 
    function allowInput(el){ 
     console.log(el); 
     // will remove .subtask-hide and add .subtask to element clicked 
     // will remove .subtask-cancel-hide and add .subtask-cancel to second element of parent when clicked 
    } 

    function disallowInput(el){ 
     console.log(el); 
     // will remove value and .subtask of element and add .subtask-hide when clicked 
     // will remove .subtask-cancel and add .subtask-cancel-hide to second element of parent when clicked 
    } 
<script> 

Answer 1

ここで達成しようとしていることは完全にはわかりません。私はのようにスタイルにしたい

input { 
 
    background: none; 
 
    border: none; 
 
} 
 
input:focus { 
 
    background: white; 
 
    border: 1px solid grey; 
 
}

<div class="form-group col-xs-12"> 
 
    <div class="col-xs-12"> 
 
    <div class="col-xs-1"></div> 
 
    <input type="text" id="AddNewSubTask" name="AddNewSubTask" placeholder="Add New SubTask" class="subtask-hide col-xs-10" onclick="allowInput(this);"> 
 
    <div id="cancelTask" class="fa fa-times fa-2x col-xs-1 subtask-cancel-hide" aria-hidden="true" onclick="disallowInput(this);"></div> 
 
    </div> 
 
</div>

Answer 2

：あなただけのユーザーが、あなただけのように同じよう:focus疑似クラスを使用することができる情報を入力したとき、フィールドは、テキストボックスのように動作しますクリックしない限り表示されるプレースホルダーのテキストだけを持つdivを作成し、CSSクラスを追加して、一度クリックするとテキストボックスのように見えるようにします。

私が正しくあなたの質問を理解していれば、あなたは焦点を当て/クリックするまで、それは、入力されていないかのように、入力を示したいと思います。 これは、 '：not（：focus）' css演算子を使用することで実現できます。 （広くサポートされている：http://www.w3schools.com/cssref/sel_not.asp）

これは、@ mark_c（最初の回答）とは少し異なるアプローチです。私はスタイリングを2回上書きしないことを好みますが、必要なものだけをスタイルします。

例

#AddNewSubTask:not(:focus) { 
 
    border: none; 
 
}

<div class="form-group col-xs-12"> 
 
    <div class="col-xs-12"> 
 
    <div class="col-xs-1"></div> 
 
    <input type="text" id="AddNewSubTask" name="AddNewSubTask" placeholder="Add New SubTask" class="subtask-hide col-xs-10"> 
 
    <div id="cancelTask" class="fa fa-times fa-2x col-xs-1 subtask-cancel-hide" aria-hidden="true"></div> 
 
    </div> 
 
</div>