Hi Andrew,
To shrink the cursor in Chrome, just change line-height to 1.6em. However styling a simple input to have a border like the AutoComplete has, is a task that is close to impossible. There are two approaches which have their cons:
- Mimic the AutoComplete structure - a span wrapper with classes .k-autocomplete, .k-widget, .k-header and input in it with class .k-input (not .k-textbox). This approach involves wrapping all your input elements but looks exactly like the AutoComplete widget (minus the hover effects).
- Use box shadows - with 2 inset shadows the .k-textbox can get a border similar to the one AutoComplete has, but without the gradiented look. However box shadows in IE9+ get too rounded due to their different shadow algorithm. We can almost fix that with even more box shadows and even add a hover. The downside of this method is that IE7 and 8 don't support box shadows. Anyway, the rules needed are:
.k-textbox
{
.box-shadow(~"inset 0 0 0 2px @{header-background-color}, inset 2px 2px 0 1px @{shadow-inset-color}, inset -2px -2px 0 1px @{shadow-inset-color}, inset 2px -2px 0 1px @{shadow-inset-color}, inset -2px 2px 0 1px @{shadow-inset-color}");
}
.k-textbox:hover
{
.box-shadow(~"inset 0 0 0 2px @{hover-background-color}, inset 2px 2px 0 1px @{shadow-inset-color}, inset -2px -2px 0 1px @{shadow-inset-color}, inset 2px -2px 0 1px @{shadow-inset-color}, inset -2px 2px 0 1px @{shadow-inset-color}");
}
Add these to template.less and use our fork of LESS (or LESS 1.2.x, but not 1.3) to generate the skins (or just remove the LESS parts and replace the color variables).
All the best,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework -
download Kendo UI now!