I have some text form elements That I want to style as a div with only the placeholder text visible unless clicked on and then add the CSS class to make it look and act like a textbox once clicked.

What css do I need to add to .subtask-hide to make it appear as a blank div until I click it once?

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

I have some text form elements That I want to style as a div with only the placeholder text visible unless clicked on and then add the CSS class to make it look and act like a textbox once clicked.

What css do I need to add to .subtask-hide to make it appear as a blank div until I click it once?

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

• javascript
• jquery
• html
• css
• twitter-bootstrap-3

• Are you trying to display only <input> placeholder until the text of <input> placeholder is clicked? – guest271314 Commented Oct 25, 2016 at 22:49
• That does not look like an attempt to write the JavaScript to me, but you'll want to change Element.style property values, like Element.style.background = '#000;' or something. That's just a bad arbitrary example by the way. Make sure that you set Element.readOnly = true; or Element.readOnly = false; when changing your style if you do or don't want the user to be able to interact. – StackSlave Commented Oct 25, 2016 at 22:54

2 Answers 2

I'm not entirely clear on what you're trying to achieve here. If you just want the field to act like a text box when the user is entering info you can just use the :focus pseudo class like so:

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>

That I want to style as a div with only the placeholder text visible unless clicked on and then add the CSS class to make it look and act like a textbox once clicked.

If I understand your question correctly, you want to show the input as if it isn't an input, until focussed/clicked. You could achieve that by using the ':not(:focus)' css operator. (Widely supported: http://www.w3schools./cssref/sel_not.asp.)

It's a slightly different approach than @mark_c's (first answer). I prefer not to overwrite the styling twice but only style what's needed.

Example

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