css to remove text input styling

Question

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>

Answer 1

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> 

Answer 2

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.com/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.

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