Working from the image you provided, I couldn't see a way to style the individual characters other than subclassing the spinner and re-writing the content. Here's how I did that starting with the new spinner class:
Code:
Ext.define('My.ux.MySpinner', {
extend: 'Ext.field.Spinner',
xtype: 'myspinner',
initialize: function() {
this.callParent(arguments);
// get the input element
var inputEl = this.element.down("input");
// insert a new element after the input
// this will be used to re-write the value
Ext.DomHelper.insertAfter(inputEl, {
tag: 'div',
cls: 'my-spinner-mask'
});
// attach event handler used to update the mask
this.on('change', this.handleSpin);
// initialize the value in the mask
this.updateSpinnerMask();
},
updateSpinnerMask: function() {
// split the spinner to individual characters
var splitValue = new String(this.getValue()).split("");
var newContent = "";
// wrap each character in spans
for(var i = 0; i < splitValue.length; i++) {
newContent += "<span>" + splitValue[i] + "</span>";
}
// update the spinner mask
this.element.down('.my-spinner-mask').setHtml(newContent);
},
handleSpin: function(spinner, newValue) {
this.updateSpinnerMask();
}
});
This code essentially adds a new div element just under the input element and re-writes the value of the spinner with spans wrapping each character. After that, the following styles can be used:
Code:
.x-spinner {
background-color: transparent;
input {
display: none;
}
.my-spinner-mask {
position: relative;
text-align: center;
top: 50px;
width: 100%;
height: 44px;
span {
background-color: #333;
color: #fff;
margin-right: 2px;
padding: 5px;
}
}
}
to produce this result:
screen-shot.png
I hope this helps.
Brice