CSS vertical scrollbar padding left/right in UL possible?

You can see an example below, basically forget adding margin or padding there, just increase the width/height of scroll area, and decrease the width height of thumb/track. Quoted from how to customise custom scroll? body { min-height: 1000px; font-family: sans-serif; } div#container { height: 200px; width: 300px; overflow: scroll; border-radius: 5px; margin: 10px; border: 1px …

Read more

Nesting CSS classes

Update 1: There is a CSS3 spec for CSS level 3 nesting. It’s currently a draft. https://tabatkins.github.io/specs/css-nesting/ Update 2 (2019): We now have a CSSWG editors draft https://drafts.csswg.org/css-nesting-1/ Update 3 (2022): We now have a W3C First Public Working Draft https://www.w3.org/TR/css-nesting-1/ If approved, the syntax would look like this: table.colortable { & td { text-align:center; …

Read more

fail to change placeholder color with Bootstrap 3

Assign the placeholder to a class selector like this: .form-control::-webkit-input-placeholder { color: white; } /* WebKit, Blink, Edge */ .form-control:-moz-placeholder { color: white; } /* Mozilla Firefox 4 to 18 */ .form-control::-moz-placeholder { color: white; } /* Mozilla Firefox 19+ */ .form-control:-ms-input-placeholder { color: white; } /* Internet Explorer 10-11 */ .form-control::-ms-input-placeholder { color: white; …

Read more

Add a css class to a field in wtform

You actually don’t need to go to the widget level to attach an HTML class attribute to the rendering of the field. You can simply specify it using the class_ parameter in the jinja template. e.g. {{ form.email(class_=”form-control”) }} will result in the following HTML:: <input class=”form-control” id=”email” name=”email” type=”text” value=””> to do this dynamically, …

Read more

Aligning text and select boxes to the same width in CSS?

This is because the <input type=”text” /> element has a slightly different default style to the <select> element e.g. the border, padding and margin values may be different. You can observe these default styles through an element inspector such as Firebug for Firefox or the built-in one for Chrome. Futhermore, these default stylesheets differ from …

Read more