Question

我有一些文本表单元素我希望将样式设置为div，只显示占位符文本，除非单击，然后添加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>

Answer 1

我不清楚你在这里想要达到的目标。如果您只是希望在用户输入信息时该字段的行为类似于文本框，您可以使用: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>

Answer 2

我希望将样式设置为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>

css删除文本输入样式

2 个答案: