Force enabled look to readonly input with bootstrap CSS

Question

I have an app using bootstrap.css for the design. I have a readonly input which looks like disabled because of bootstrap (cursor not allowed, background color grey etc...). I would like the input to look enabled with readonly activated.

How can I do that?

edit (adding more code):

Header:

doctype html
html(ng-app='myApp')
  head
    title=title
    link(rel='stylesheet' href='stylesheets/bootstrap.min-3.1.1.css')
    link(rel='stylesheet' href='stylesheets/style.css')

My input: input.form-control(readonly, placeholder='jj-mm-aaaa')

My stylus (style.css):

input[readonly]
  background-color: #fff

Answer 1

Assuming your custom css is included after the boostrap.css, place the following code in your custom css file

input[readonly] {
    background-color: #fff;
    /* any other styles */
}

If you only want to apply this style to specific read only inputs, add a class "exampleclass" to those inputs, and then use:

input[readonly].exampleclass {
   background-color: #fff;
}