Bootstrap + Datepicker

Question

I have made a form with different inputs. One of these allow to choose a date, made with this very nice package: http://www.eyecon.ro/bootstrap-datepicker/

The only problem is that all the form fields have the default blue focus:

.uneditable-input:focus {
 border-color: rgba(82, 168, 236, 0.8);
 outline: 0;
 outline: thin dotted \9;
 ...
 }

But the field made with Bootstrap-Datepicker has a yellow default focus, that I am not able to modify.
Someone knows how can I remove that style and apply the default bootstrap style, so to obtain consistency?
Thank you!

Answer 1

Assuming that you're using the latest Bootstrap 3, you just need to add the form-control class to your inputs and it will override the datepicker's yellow outline. I also wrapped the inputs inside `col-md-3' since Bootstrap 3 no longer defines a specific width for inputs.

<div class="input-append date ">
  <div class="col-md-3">
    <label>Arrival Date</label>
    <input name="arrival" class="form-control datepicker" data-date-format="dd/mm/yyyy" id="checkin" placeholder="click here"> 
  </div>
</div>
<div class="input-append date"> 
  <div class="col-md-3">
    <label>Outgoing Date</label>
    <input name="outgoing" class="form-control datepicker" data-date-format="dd/mm/yyyy" id="checkout" placeholder="click here">
  </div>
</div>

http://bootply.com/86834

EDIT:

For Bootstrap 2.x just make sure you add type="text" to your inputs and it will show the blue outline. I've update the Bootply.