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删除文本输入样式

回答

相关问题