Styling Editor input field with bootstrap has-success, has-warning, has-error and glyphicon-ok etc.

Styling Editor input field with bootstrap has-success, has-warning, has-error and glyphicon-ok etc.

CapamaniaCapamania Posts: 233Questions: 81Answers: 5
edited January 2017 in Editor

Is it possible to add a span behind the DTE input field and additional css classes depending on different values? So that the input looks like:

<div class="DTE_Field_InputControl has-success has-feedback" data-dte-e="input-control" style="display: block;">
    <input id="DTE_Field_status" class="form-control" type="text">
        <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true">
</div>

Based on Bootstrap Example 'Input with Success' (http://getbootstrap.com/css/#forms ):

<div class="form-group has-success has-feedback">
    <label class="control-label">Status:</label>                                                        
    <input type="text" id="Status" class="form-control">
    <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>                                                           
</div>

If yes, what's the best way to do this?

Answers

  • allanallan Posts: 63,498Questions: 1Answers: 10,471 Site admin

    You would need to create a custom field to be able to do that. You can't typically inject HTML into an existing field type (typically you can, but it's very hacky and a custom field type is how I would recommend it be done).

    Allan

This discussion has been closed.