css刪除文本輸入樣式

我有一些文本表單元素我想作爲div的樣式只有佔位符文本可見，除非點擊，然後添加CSS類，使其看起來和行爲像一個文本框一旦點擊。css刪除文本輸入樣式

什麼CSS我需要添加到.subtask-hide，使它看起來像一個空白的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>

來源

2016-10-25 shaun

你是想只顯示''''的'文本'placeholder'點擊placeholder'直到？ – guest271314

這看起來不像是向我寫JavaScript的嘗試，但是你會想改變'Element.style'屬性值，比如'Element.style.background ='＃000;''或者其他東西。順便說一下，這只是一個不好的例子。確保在更改樣式時設置了'Element.readOnly = true;'或'Element.readOnly = false;'如果您希望或不希望用戶能夠進行交互，請更改樣式。 – PHPglue

我不完全清楚你想在這裏實現什麼。如果你只是希望字段，當用戶輸入信息像一個文本框，你可以只使用:focus僞類，像這樣：

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>

來源

2016-10-25 22:55:04

，我要爲樣式一個只有佔位符文本可見的div，除非點擊，然後添加CSS類，使其看起來像一個文本框一旦點擊。

如果我正確理解你的問題，你想顯示的輸入，如果它不是一個輸入，直到聚焦/點擊。您可以通過使用'：not（：focus）'css運算符來實現。（廣泛支持：http://www.w3schools.com/cssref/sel_not.asp。）

這與@ mark_c（第一個答案）略有不同。我更喜歡不重寫兩次樣式，只是樣式需要。

例

#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>

來源

2016-10-25 22:59:16 Richard

css刪除文本輸入樣式

回答

相關問題