Bootstrap（Twitter Bootstrapではありません！）のデザイン性が非常に優れているので、これを利用してデザインを統一させる方法を書いてます。

サンプル

１．jQuery UIの「spinner」利用時にBootstrapのデザインを反映させます

２．<input type=”file”>のデザインにBootstrapを利用します

HTML

[html]
1.<input type="text" id="txt1">
2.<input type="file" id="file1">
[/html]

JavaScript

[js]
// 1.jQuery UIのspinnerをBootstrap風に
$(‘#txt1’).spinner({
create: function() { bootstrap(‘spinner’, ‘txt1’); }
});

// 2.<input type="file">のデザインをBootstrap風に
bootstrap(‘file’, ‘file1’);

//
// デザインをBootstrapに近づける関数
// bootstrap(type, id)
// type: spinner(jQuery UI) | file(input[type=file]
// id : オブジェクトのID
//
function bootstrap(ui, id) {
if(id == undefined) return;

switch(ui) {
case ‘spinner’:
// jQuery UIの「spinner」を変更
$(‘#’+id)
.focus(function() {
$(this).parent().addClass(‘form-focus’);
})
.blur(function() {
$(this).parent().removeClass(‘form-focus’);
})
.parent().addClass(‘form-control’).css({padding: ‘0’, height: ‘auto’});
break;
case ‘file’:
// input[type=file]を変更
var w = $(‘#’+id).outerWidth();
var htm = ‘<div class="input-group" style="width:’ + w + ‘px">’
+ ‘<span class="input-group-btn">’
+ ‘<button type="button" class="btn btn-default" id="open-‘ + id + ‘"><span class="glyphicon glyphicon-folder-open"></span></button>’
+ ‘</span>’
+ ‘<input type="text" id="file-‘ + id + ‘" class="form-control" readonly style="cursor: pointer">’
+ ‘</div>’;

$(‘#’+id)
.css("display", "none")
.parent().append(htm)
.change(function() {
var file = $(‘#’+id).prop("files")[0];
$("#file-" + id).val(file.name);
});

$("#open-" + id + ", #file-" + id).click(function() {
$("#"+id).click();
$(this).blur();
});
break;
}
}
[/js]

StyleSheet

[css]
.form-focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
}
[/css]

スタイルシートはBootstrapの「.form-control:focus」をそのままコピーしています。(spinner用)