There is such a window.

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria- hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="exampleModalLabel">New message</h5> <button type="button" class="close" data-dismiss="modal" aria-l abel="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <form> <div class="form-group"> <label for="recipient-name" class="col-form-label">Recipient:. </label> <input type="text" class="form-control" id="recipient-name"> </div> <div class="form-group"> <label for="message-text" class="col-form-label">Message:. </label> <textarea class="form-control" id="message-text"></textarea> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data- dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Send message</button> </div> </div> </div> </div>

Make the input visible with the border, the cursor only after pressing, and so simple texts in the form of a label.

Implement through botstrap or css file?

    1 answer 1

     input { border: 1px solid #00000000; } input:focus { border: 1px solid #000000; } 
     <input type="text" placeholder="text 1" /> <input type="text" placeholder="text 2" />

    • one
      I checked, it works in my only way: input {border: none;} input:focus {border: 1px solid blue;} - Alexan-Dwer
    • @ Alexan-Dwer, no, in your version will jump when clicked. Just replace #00000000 with transparent or rgba(0,0,0,0) . - Qwertiy ♦
    • @Qwertiy in my version? - Alexan-Dwer
    • @ Alexan-Dwer, jump - in yours, and replace the color - in the variant from the answer. - Qwertiy ♦
    • 2
      @ Alexan-Dwer Qwertiy means that the second input will shift by 2 pixels as the border around the first appears - Igor