dijit样式定制之TextBox（一）

参考资料：http://dojotoolkit.org/reference-guide/1.9/dijit/themes.html

　　　　　　　http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/themes/themeTester.html

　　　　　　　http://www.lesscss.net/article/home.html

　　这系列博客主要因为工作中经常需要更改dijit样式，每次都需要看dijit的DOM结构来更改，好多次都是改了一个class样式连带着影响到其他dijit。痛定思痛之后决定深入了解一下dijit的样式结构，把他分享出来希望高手能够不吝指正。

　　dijit的样式表位于以下目录中，dijit.css是对所有dijit布局结构的定义，另外我们还可以看到三个目录：claro、soria、tundra这三个目录中定义的就是dojo带给我们的三种样式风格。进入到claro中我们可以看到其中的css文件和less文件，对于我们需要修改dijit样式的开发者来说，主要就是看其中的less文件，这就好比一个类库给我们提供了一系列接口。这里面定义的就是不同风格下的dijit样式，我们打开其中一个，可以看到文件开头介绍了该文件中主要定制了哪些class，以及这些class的作用。（less是一种css预编译语言，整个dojo样式体系就是用它写的，详情请看第三个链接）

　　现在我们打开themeTester.html页面，在这可以看到各种dijit，这个时候右键出来的是contextmenu菜单，不想要的话在代码里把它相应的代码注掉就行。下面我们先来看看TextBox，所有的TextBox都是通过div内嵌input来布局

由于一个元素可以加多个class所以左图主要画出能够反映dijit布局结构的class，具体的类还需要读者自己去看，下面介绍几个重要的class：

　　.dijitInputField，当你想改变textBox的宽度或者高度时，只需改变改变该类中的padding属性即可。

　　.dijitInputInner，该类中定义TextBox的内部input样式，可以设置color、padding

　　.dijitArowButton，该类主要定义下拉按钮的背景样式

　　.dijitArrowButtonInner，该类主要通过设置background-position来改变不同的箭头指向

　　.dijitValidationContainer，error状态下中间的叹号，通过设置background、border、width样式

　　至于不同状态下TextBox的样式在claro/form/Common.less中line73-150设置，还请读者自己查看。

　　dijit的样式十分庞杂，比dojo的类更加繁琐。今天先到这吧，以后会继续更新，希望大家支持，提出宝贵意见。