input-number.css 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941
  1. /* BEM support Func
  2. -------------------------- */
  3. /* Element Chalk Variables */
  4. /* Transition
  5. -------------------------- */
  6. /* Color
  7. -------------------------- */
  8. /* 53a8ff */
  9. /* 66b1ff */
  10. /* 79bbff */
  11. /* 8cc5ff */
  12. /* a0cfff */
  13. /* b3d8ff */
  14. /* c6e2ff */
  15. /* d9ecff */
  16. /* ecf5ff */
  17. /* Link
  18. -------------------------- */
  19. /* Border
  20. -------------------------- */
  21. /* Fill
  22. -------------------------- */
  23. /* Typography
  24. -------------------------- */
  25. /* Size
  26. -------------------------- */
  27. /* z-index
  28. -------------------------- */
  29. /* Disable base
  30. -------------------------- */
  31. /* Icon
  32. -------------------------- */
  33. /* Checkbox
  34. -------------------------- */
  35. /* Radio
  36. -------------------------- */
  37. /* Select
  38. -------------------------- */
  39. /* Alert
  40. -------------------------- */
  41. /* MessageBox
  42. -------------------------- */
  43. /* Message
  44. -------------------------- */
  45. /* Notification
  46. -------------------------- */
  47. /* Input
  48. -------------------------- */
  49. /* Cascader
  50. -------------------------- */
  51. /* Group
  52. -------------------------- */
  53. /* Tab
  54. -------------------------- */
  55. /* Button
  56. -------------------------- */
  57. /* cascader
  58. -------------------------- */
  59. /* Switch
  60. -------------------------- */
  61. /* Dialog
  62. -------------------------- */
  63. /* Table
  64. -------------------------- */
  65. /* Pagination
  66. -------------------------- */
  67. /* Popup
  68. -------------------------- */
  69. /* Popover
  70. -------------------------- */
  71. /* Tooltip
  72. -------------------------- */
  73. /* Tag
  74. -------------------------- */
  75. /* Tree
  76. -------------------------- */
  77. /* Dropdown
  78. -------------------------- */
  79. /* Badge
  80. -------------------------- */
  81. /* Card
  82. --------------------------*/
  83. /* Slider
  84. --------------------------*/
  85. /* Steps
  86. --------------------------*/
  87. /* Menu
  88. --------------------------*/
  89. /* Rate
  90. --------------------------*/
  91. /* DatePicker
  92. --------------------------*/
  93. /* Loading
  94. --------------------------*/
  95. /* Scrollbar
  96. --------------------------*/
  97. /* Carousel
  98. --------------------------*/
  99. /* Collapse
  100. --------------------------*/
  101. /* Transfer
  102. --------------------------*/
  103. /* Header
  104. --------------------------*/
  105. /* Footer
  106. --------------------------*/
  107. /* Main
  108. --------------------------*/
  109. /* Timeline
  110. --------------------------*/
  111. /* Backtop
  112. --------------------------*/
  113. /* Link
  114. --------------------------*/
  115. /* Calendar
  116. --------------------------*/
  117. /* Form
  118. -------------------------- */
  119. /* Avatar
  120. --------------------------*/
  121. /* Empty
  122. -------------------------- */
  123. /* Descriptions
  124. -------------------------- */
  125. /* Skeleton
  126. --------------------------*/
  127. /* Svg
  128. --------------- */
  129. /* Result
  130. -------------------------- */
  131. /* Break-point
  132. --------------------------*/
  133. /* Break-points
  134. -------------------------- */
  135. /* Scrollbar
  136. -------------------------- */
  137. /* Placeholder
  138. -------------------------- */
  139. /* BEM
  140. -------------------------- */
  141. /* Element Chalk Variables */
  142. /* Transition
  143. -------------------------- */
  144. /* Color
  145. -------------------------- */
  146. /* 53a8ff */
  147. /* 66b1ff */
  148. /* 79bbff */
  149. /* 8cc5ff */
  150. /* a0cfff */
  151. /* b3d8ff */
  152. /* c6e2ff */
  153. /* d9ecff */
  154. /* ecf5ff */
  155. /* Link
  156. -------------------------- */
  157. /* Border
  158. -------------------------- */
  159. /* Fill
  160. -------------------------- */
  161. /* Typography
  162. -------------------------- */
  163. /* Size
  164. -------------------------- */
  165. /* z-index
  166. -------------------------- */
  167. /* Disable base
  168. -------------------------- */
  169. /* Icon
  170. -------------------------- */
  171. /* Checkbox
  172. -------------------------- */
  173. /* Radio
  174. -------------------------- */
  175. /* Select
  176. -------------------------- */
  177. /* Alert
  178. -------------------------- */
  179. /* MessageBox
  180. -------------------------- */
  181. /* Message
  182. -------------------------- */
  183. /* Notification
  184. -------------------------- */
  185. /* Input
  186. -------------------------- */
  187. /* Cascader
  188. -------------------------- */
  189. /* Group
  190. -------------------------- */
  191. /* Tab
  192. -------------------------- */
  193. /* Button
  194. -------------------------- */
  195. /* cascader
  196. -------------------------- */
  197. /* Switch
  198. -------------------------- */
  199. /* Dialog
  200. -------------------------- */
  201. /* Table
  202. -------------------------- */
  203. /* Pagination
  204. -------------------------- */
  205. /* Popup
  206. -------------------------- */
  207. /* Popover
  208. -------------------------- */
  209. /* Tooltip
  210. -------------------------- */
  211. /* Tag
  212. -------------------------- */
  213. /* Tree
  214. -------------------------- */
  215. /* Dropdown
  216. -------------------------- */
  217. /* Badge
  218. -------------------------- */
  219. /* Card
  220. --------------------------*/
  221. /* Slider
  222. --------------------------*/
  223. /* Steps
  224. --------------------------*/
  225. /* Menu
  226. --------------------------*/
  227. /* Rate
  228. --------------------------*/
  229. /* DatePicker
  230. --------------------------*/
  231. /* Loading
  232. --------------------------*/
  233. /* Scrollbar
  234. --------------------------*/
  235. /* Carousel
  236. --------------------------*/
  237. /* Collapse
  238. --------------------------*/
  239. /* Transfer
  240. --------------------------*/
  241. /* Header
  242. --------------------------*/
  243. /* Footer
  244. --------------------------*/
  245. /* Main
  246. --------------------------*/
  247. /* Timeline
  248. --------------------------*/
  249. /* Backtop
  250. --------------------------*/
  251. /* Link
  252. --------------------------*/
  253. /* Calendar
  254. --------------------------*/
  255. /* Form
  256. -------------------------- */
  257. /* Avatar
  258. --------------------------*/
  259. /* Empty
  260. -------------------------- */
  261. /* Descriptions
  262. -------------------------- */
  263. /* Skeleton
  264. --------------------------*/
  265. /* Svg
  266. --------------- */
  267. /* Result
  268. -------------------------- */
  269. /* Break-point
  270. --------------------------*/
  271. /* BEM support Func
  272. -------------------------- */
  273. /* Element Chalk Variables */
  274. /* Transition
  275. -------------------------- */
  276. /* Color
  277. -------------------------- */
  278. /* 53a8ff */
  279. /* 66b1ff */
  280. /* 79bbff */
  281. /* 8cc5ff */
  282. /* a0cfff */
  283. /* b3d8ff */
  284. /* c6e2ff */
  285. /* d9ecff */
  286. /* ecf5ff */
  287. /* Link
  288. -------------------------- */
  289. /* Border
  290. -------------------------- */
  291. /* Fill
  292. -------------------------- */
  293. /* Typography
  294. -------------------------- */
  295. /* Size
  296. -------------------------- */
  297. /* z-index
  298. -------------------------- */
  299. /* Disable base
  300. -------------------------- */
  301. /* Icon
  302. -------------------------- */
  303. /* Checkbox
  304. -------------------------- */
  305. /* Radio
  306. -------------------------- */
  307. /* Select
  308. -------------------------- */
  309. /* Alert
  310. -------------------------- */
  311. /* MessageBox
  312. -------------------------- */
  313. /* Message
  314. -------------------------- */
  315. /* Notification
  316. -------------------------- */
  317. /* Input
  318. -------------------------- */
  319. /* Cascader
  320. -------------------------- */
  321. /* Group
  322. -------------------------- */
  323. /* Tab
  324. -------------------------- */
  325. /* Button
  326. -------------------------- */
  327. /* cascader
  328. -------------------------- */
  329. /* Switch
  330. -------------------------- */
  331. /* Dialog
  332. -------------------------- */
  333. /* Table
  334. -------------------------- */
  335. /* Pagination
  336. -------------------------- */
  337. /* Popup
  338. -------------------------- */
  339. /* Popover
  340. -------------------------- */
  341. /* Tooltip
  342. -------------------------- */
  343. /* Tag
  344. -------------------------- */
  345. /* Tree
  346. -------------------------- */
  347. /* Dropdown
  348. -------------------------- */
  349. /* Badge
  350. -------------------------- */
  351. /* Card
  352. --------------------------*/
  353. /* Slider
  354. --------------------------*/
  355. /* Steps
  356. --------------------------*/
  357. /* Menu
  358. --------------------------*/
  359. /* Rate
  360. --------------------------*/
  361. /* DatePicker
  362. --------------------------*/
  363. /* Loading
  364. --------------------------*/
  365. /* Scrollbar
  366. --------------------------*/
  367. /* Carousel
  368. --------------------------*/
  369. /* Collapse
  370. --------------------------*/
  371. /* Transfer
  372. --------------------------*/
  373. /* Header
  374. --------------------------*/
  375. /* Footer
  376. --------------------------*/
  377. /* Main
  378. --------------------------*/
  379. /* Timeline
  380. --------------------------*/
  381. /* Backtop
  382. --------------------------*/
  383. /* Link
  384. --------------------------*/
  385. /* Calendar
  386. --------------------------*/
  387. /* Form
  388. -------------------------- */
  389. /* Avatar
  390. --------------------------*/
  391. /* Empty
  392. -------------------------- */
  393. /* Descriptions
  394. -------------------------- */
  395. /* Skeleton
  396. --------------------------*/
  397. /* Svg
  398. --------------- */
  399. /* Result
  400. -------------------------- */
  401. /* Break-point
  402. --------------------------*/
  403. /* Break-points
  404. -------------------------- */
  405. /* Scrollbar
  406. -------------------------- */
  407. /* Placeholder
  408. -------------------------- */
  409. /* BEM
  410. -------------------------- */
  411. /* Element Chalk Variables */
  412. /* Transition
  413. -------------------------- */
  414. /* Color
  415. -------------------------- */
  416. /* 53a8ff */
  417. /* 66b1ff */
  418. /* 79bbff */
  419. /* 8cc5ff */
  420. /* a0cfff */
  421. /* b3d8ff */
  422. /* c6e2ff */
  423. /* d9ecff */
  424. /* ecf5ff */
  425. /* Link
  426. -------------------------- */
  427. /* Border
  428. -------------------------- */
  429. /* Fill
  430. -------------------------- */
  431. /* Typography
  432. -------------------------- */
  433. /* Size
  434. -------------------------- */
  435. /* z-index
  436. -------------------------- */
  437. /* Disable base
  438. -------------------------- */
  439. /* Icon
  440. -------------------------- */
  441. /* Checkbox
  442. -------------------------- */
  443. /* Radio
  444. -------------------------- */
  445. /* Select
  446. -------------------------- */
  447. /* Alert
  448. -------------------------- */
  449. /* MessageBox
  450. -------------------------- */
  451. /* Message
  452. -------------------------- */
  453. /* Notification
  454. -------------------------- */
  455. /* Input
  456. -------------------------- */
  457. /* Cascader
  458. -------------------------- */
  459. /* Group
  460. -------------------------- */
  461. /* Tab
  462. -------------------------- */
  463. /* Button
  464. -------------------------- */
  465. /* cascader
  466. -------------------------- */
  467. /* Switch
  468. -------------------------- */
  469. /* Dialog
  470. -------------------------- */
  471. /* Table
  472. -------------------------- */
  473. /* Pagination
  474. -------------------------- */
  475. /* Popup
  476. -------------------------- */
  477. /* Popover
  478. -------------------------- */
  479. /* Tooltip
  480. -------------------------- */
  481. /* Tag
  482. -------------------------- */
  483. /* Tree
  484. -------------------------- */
  485. /* Dropdown
  486. -------------------------- */
  487. /* Badge
  488. -------------------------- */
  489. /* Card
  490. --------------------------*/
  491. /* Slider
  492. --------------------------*/
  493. /* Steps
  494. --------------------------*/
  495. /* Menu
  496. --------------------------*/
  497. /* Rate
  498. --------------------------*/
  499. /* DatePicker
  500. --------------------------*/
  501. /* Loading
  502. --------------------------*/
  503. /* Scrollbar
  504. --------------------------*/
  505. /* Carousel
  506. --------------------------*/
  507. /* Collapse
  508. --------------------------*/
  509. /* Transfer
  510. --------------------------*/
  511. /* Header
  512. --------------------------*/
  513. /* Footer
  514. --------------------------*/
  515. /* Main
  516. --------------------------*/
  517. /* Timeline
  518. --------------------------*/
  519. /* Backtop
  520. --------------------------*/
  521. /* Link
  522. --------------------------*/
  523. /* Calendar
  524. --------------------------*/
  525. /* Form
  526. -------------------------- */
  527. /* Avatar
  528. --------------------------*/
  529. /* Empty
  530. -------------------------- */
  531. /* Descriptions
  532. -------------------------- */
  533. /* Skeleton
  534. --------------------------*/
  535. /* Svg
  536. --------------- */
  537. /* Result
  538. -------------------------- */
  539. /* Break-point
  540. --------------------------*/
  541. .el-textarea {
  542. position: relative;
  543. display: inline-block;
  544. width: 100%;
  545. vertical-align: bottom;
  546. font-size: 14px; }
  547. .el-textarea__inner {
  548. display: block;
  549. resize: vertical;
  550. padding: 5px 15px;
  551. line-height: 1.5;
  552. -webkit-box-sizing: border-box;
  553. box-sizing: border-box;
  554. width: 100%;
  555. font-size: inherit;
  556. color: #606266;
  557. background-color: #FFFFFF;
  558. background-image: none;
  559. border: 1px solid #DCDFE6;
  560. border-radius: 4px;
  561. -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  562. transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); }
  563. .el-textarea__inner::-webkit-input-placeholder {
  564. color: #C0C4CC; }
  565. .el-textarea__inner::-moz-placeholder {
  566. color: #C0C4CC; }
  567. .el-textarea__inner:-ms-input-placeholder {
  568. color: #C0C4CC; }
  569. .el-textarea__inner::-ms-input-placeholder {
  570. color: #C0C4CC; }
  571. .el-textarea__inner::placeholder {
  572. color: #C0C4CC; }
  573. .el-textarea__inner:hover {
  574. border-color: #C0C4CC; }
  575. .el-textarea__inner:focus {
  576. outline: none;
  577. border-color: #5075FC; }
  578. .el-textarea .el-input__count {
  579. color: #909399;
  580. background: #FFFFFF;
  581. position: absolute;
  582. font-size: 12px;
  583. bottom: 5px;
  584. right: 10px; }
  585. .el-textarea.is-disabled .el-textarea__inner {
  586. background-color: #F5F7FA;
  587. border-color: #E4E7ED;
  588. color: #C0C4CC;
  589. cursor: not-allowed; }
  590. .el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder {
  591. color: #C0C4CC; }
  592. .el-textarea.is-disabled .el-textarea__inner::-moz-placeholder {
  593. color: #C0C4CC; }
  594. .el-textarea.is-disabled .el-textarea__inner:-ms-input-placeholder {
  595. color: #C0C4CC; }
  596. .el-textarea.is-disabled .el-textarea__inner::-ms-input-placeholder {
  597. color: #C0C4CC; }
  598. .el-textarea.is-disabled .el-textarea__inner::placeholder {
  599. color: #C0C4CC; }
  600. .el-textarea.is-exceed .el-textarea__inner {
  601. border-color: #F56C6C; }
  602. .el-textarea.is-exceed .el-input__count {
  603. color: #F56C6C; }
  604. .el-input {
  605. position: relative;
  606. font-size: 14px;
  607. display: inline-block;
  608. width: 100%; }
  609. .el-input::-webkit-scrollbar {
  610. z-index: 11;
  611. width: 6px; }
  612. .el-input::-webkit-scrollbar:horizontal {
  613. height: 6px; }
  614. .el-input::-webkit-scrollbar-thumb {
  615. border-radius: 5px;
  616. width: 6px;
  617. background: #b4bccc; }
  618. .el-input::-webkit-scrollbar-corner {
  619. background: #fff; }
  620. .el-input::-webkit-scrollbar-track {
  621. background: #fff; }
  622. .el-input::-webkit-scrollbar-track-piece {
  623. background: #fff;
  624. width: 6px; }
  625. .el-input .el-input__clear {
  626. color: #C0C4CC;
  627. font-size: 14px;
  628. cursor: pointer;
  629. -webkit-transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  630. transition: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1); }
  631. .el-input .el-input__clear:hover {
  632. color: #909399; }
  633. .el-input .el-input__count {
  634. height: 100%;
  635. display: -webkit-inline-box;
  636. display: -ms-inline-flexbox;
  637. display: inline-flex;
  638. -webkit-box-align: center;
  639. -ms-flex-align: center;
  640. align-items: center;
  641. color: #909399;
  642. font-size: 12px; }
  643. .el-input .el-input__count .el-input__count-inner {
  644. background: #FFFFFF;
  645. line-height: initial;
  646. display: inline-block;
  647. padding: 0 5px; }
  648. .el-input__inner {
  649. -webkit-appearance: none;
  650. background-color: #FFFFFF;
  651. background-image: none;
  652. border-radius: 4px;
  653. border: 1px solid #DCDFE6;
  654. -webkit-box-sizing: border-box;
  655. box-sizing: border-box;
  656. color: #606266;
  657. display: inline-block;
  658. font-size: inherit;
  659. height: 40px;
  660. line-height: 40px;
  661. outline: none;
  662. padding: 0 15px;
  663. -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  664. transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  665. width: 100%; }
  666. .el-input__inner::-ms-reveal {
  667. display: none; }
  668. .el-input__inner::-webkit-input-placeholder {
  669. color: #C0C4CC; }
  670. .el-input__inner::-moz-placeholder {
  671. color: #C0C4CC; }
  672. .el-input__inner:-ms-input-placeholder {
  673. color: #C0C4CC; }
  674. .el-input__inner::-ms-input-placeholder {
  675. color: #C0C4CC; }
  676. .el-input__inner::placeholder {
  677. color: #C0C4CC; }
  678. .el-input__inner:hover {
  679. border-color: #C0C4CC; }
  680. .el-input__inner:focus {
  681. outline: none;
  682. border-color: #5075FC; }
  683. .el-input__suffix {
  684. position: absolute;
  685. height: 100%;
  686. right: 5px;
  687. top: 0;
  688. text-align: center;
  689. color: #C0C4CC;
  690. -webkit-transition: all .3s;
  691. transition: all .3s;
  692. pointer-events: none; }
  693. .el-input__suffix-inner {
  694. pointer-events: all; }
  695. .el-input__prefix {
  696. position: absolute;
  697. height: 100%;
  698. left: 5px;
  699. top: 0;
  700. text-align: center;
  701. color: #C0C4CC;
  702. -webkit-transition: all .3s;
  703. transition: all .3s; }
  704. .el-input__icon {
  705. height: 100%;
  706. width: 25px;
  707. text-align: center;
  708. -webkit-transition: all .3s;
  709. transition: all .3s;
  710. line-height: 40px; }
  711. .el-input__icon:after {
  712. content: '';
  713. height: 100%;
  714. width: 0;
  715. display: inline-block;
  716. vertical-align: middle; }
  717. .el-input__validateIcon {
  718. pointer-events: none; }
  719. .el-input.is-active .el-input__inner {
  720. outline: none;
  721. border-color: #5075FC; }
  722. .el-input.is-disabled .el-input__inner {
  723. background-color: #F5F7FA;
  724. border-color: #E4E7ED;
  725. color: #C0C4CC;
  726. cursor: not-allowed; }
  727. .el-input.is-disabled .el-input__inner::-webkit-input-placeholder {
  728. color: #C0C4CC; }
  729. .el-input.is-disabled .el-input__inner::-moz-placeholder {
  730. color: #C0C4CC; }
  731. .el-input.is-disabled .el-input__inner:-ms-input-placeholder {
  732. color: #C0C4CC; }
  733. .el-input.is-disabled .el-input__inner::-ms-input-placeholder {
  734. color: #C0C4CC; }
  735. .el-input.is-disabled .el-input__inner::placeholder {
  736. color: #C0C4CC; }
  737. .el-input.is-disabled .el-input__icon {
  738. cursor: not-allowed; }
  739. .el-input.is-exceed .el-input__inner {
  740. border-color: #F56C6C; }
  741. .el-input.is-exceed .el-input__suffix .el-input__count {
  742. color: #F56C6C; }
  743. .el-input--suffix .el-input__inner {
  744. padding-right: 30px; }
  745. .el-input--prefix .el-input__inner {
  746. padding-left: 30px; }
  747. .el-input--medium {
  748. font-size: 14px; }
  749. .el-input--medium .el-input__inner {
  750. height: 36px;
  751. line-height: 36px; }
  752. .el-input--medium .el-input__icon {
  753. line-height: 36px; }
  754. .el-input--small {
  755. font-size: 13px; }
  756. .el-input--small .el-input__inner {
  757. height: 32px;
  758. line-height: 32px; }
  759. .el-input--small .el-input__icon {
  760. line-height: 32px; }
  761. .el-input--mini {
  762. font-size: 12px; }
  763. .el-input--mini .el-input__inner {
  764. height: 28px;
  765. line-height: 28px; }
  766. .el-input--mini .el-input__icon {
  767. line-height: 28px; }
  768. .el-input-group {
  769. line-height: normal;
  770. display: inline-table;
  771. width: 100%;
  772. border-collapse: separate;
  773. border-spacing: 0; }
  774. .el-input-group > .el-input__inner {
  775. vertical-align: middle;
  776. display: table-cell; }
  777. .el-input-group__append, .el-input-group__prepend {
  778. background-color: #F5F7FA;
  779. color: #909399;
  780. vertical-align: middle;
  781. display: table-cell;
  782. position: relative;
  783. border: 1px solid #DCDFE6;
  784. border-radius: 4px;
  785. padding: 0 20px;
  786. width: 1px;
  787. white-space: nowrap; }
  788. .el-input-group__append:focus, .el-input-group__prepend:focus {
  789. outline: none; }
  790. .el-input-group__append .el-select,
  791. .el-input-group__append .el-button, .el-input-group__prepend .el-select,
  792. .el-input-group__prepend .el-button {
  793. display: inline-block;
  794. margin: -10px -20px; }
  795. .el-input-group__append button.el-button,
  796. .el-input-group__append div.el-select .el-input__inner,
  797. .el-input-group__append div.el-select:hover .el-input__inner, .el-input-group__prepend button.el-button,
  798. .el-input-group__prepend div.el-select .el-input__inner,
  799. .el-input-group__prepend div.el-select:hover .el-input__inner {
  800. border-color: transparent;
  801. background-color: transparent;
  802. color: inherit;
  803. border-top: 0;
  804. border-bottom: 0; }
  805. .el-input-group__append .el-button,
  806. .el-input-group__append .el-input, .el-input-group__prepend .el-button,
  807. .el-input-group__prepend .el-input {
  808. font-size: inherit; }
  809. .el-input-group__prepend {
  810. border-right: 0;
  811. border-top-right-radius: 0;
  812. border-bottom-right-radius: 0; }
  813. .el-input-group__append {
  814. border-left: 0;
  815. border-top-left-radius: 0;
  816. border-bottom-left-radius: 0; }
  817. .el-input-group--prepend .el-input__inner {
  818. border-top-left-radius: 0;
  819. border-bottom-left-radius: 0; }
  820. .el-input-group--prepend .el-select .el-input.is-focus .el-input__inner {
  821. border-color: transparent; }
  822. .el-input-group--append .el-input__inner {
  823. border-top-right-radius: 0;
  824. border-bottom-right-radius: 0; }
  825. .el-input-group--append .el-select .el-input.is-focus .el-input__inner {
  826. border-color: transparent; }
  827. /** disalbe default clear on IE */
  828. .el-input__inner::-ms-clear {
  829. display: none;
  830. width: 0;
  831. height: 0; }
  832. .el-input-number {
  833. position: relative;
  834. display: inline-block;
  835. width: 180px;
  836. line-height: 38px; }
  837. .el-input-number .el-input {
  838. display: block; }
  839. .el-input-number .el-input__inner {
  840. -webkit-appearance: none;
  841. padding-left: 50px;
  842. padding-right: 50px;
  843. text-align: center; }
  844. .el-input-number__increase, .el-input-number__decrease {
  845. position: absolute;
  846. z-index: 1;
  847. top: 1px;
  848. width: 40px;
  849. height: auto;
  850. text-align: center;
  851. background: #F5F7FA;
  852. color: #606266;
  853. cursor: pointer;
  854. font-size: 13px; }
  855. .el-input-number__increase:hover, .el-input-number__decrease:hover {
  856. color: #5075FC; }
  857. .el-input-number__increase:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled), .el-input-number__decrease:hover:not(.is-disabled) ~ .el-input .el-input__inner:not(.is-disabled) {
  858. border-color: #5075FC; }
  859. .el-input-number__increase.is-disabled, .el-input-number__decrease.is-disabled {
  860. color: #C0C4CC;
  861. cursor: not-allowed; }
  862. .el-input-number__increase {
  863. right: 1px;
  864. border-radius: 0 4px 4px 0;
  865. border-left: 1px solid #DCDFE6; }
  866. .el-input-number__decrease {
  867. left: 1px;
  868. border-radius: 4px 0 0 4px;
  869. border-right: 1px solid #DCDFE6; }
  870. .el-input-number.is-disabled .el-input-number__increase, .el-input-number.is-disabled .el-input-number__decrease {
  871. border-color: #E4E7ED;
  872. color: #E4E7ED; }
  873. .el-input-number.is-disabled .el-input-number__increase:hover, .el-input-number.is-disabled .el-input-number__decrease:hover {
  874. color: #E4E7ED;
  875. cursor: not-allowed; }
  876. .el-input-number--medium {
  877. width: 200px;
  878. line-height: 34px; }
  879. .el-input-number--medium .el-input-number__increase, .el-input-number--medium .el-input-number__decrease {
  880. width: 36px;
  881. font-size: 14px; }
  882. .el-input-number--medium .el-input__inner {
  883. padding-left: 43px;
  884. padding-right: 43px; }
  885. .el-input-number--small {
  886. width: 130px;
  887. line-height: 30px; }
  888. .el-input-number--small .el-input-number__increase, .el-input-number--small .el-input-number__decrease {
  889. width: 32px;
  890. font-size: 13px; }
  891. .el-input-number--small .el-input-number__increase [class*=el-icon], .el-input-number--small .el-input-number__decrease [class*=el-icon] {
  892. -webkit-transform: scale(0.9);
  893. transform: scale(0.9); }
  894. .el-input-number--small .el-input__inner {
  895. padding-left: 39px;
  896. padding-right: 39px; }
  897. .el-input-number--mini {
  898. width: 130px;
  899. line-height: 26px; }
  900. .el-input-number--mini .el-input-number__increase, .el-input-number--mini .el-input-number__decrease {
  901. width: 28px;
  902. font-size: 12px; }
  903. .el-input-number--mini .el-input-number__increase [class*=el-icon], .el-input-number--mini .el-input-number__decrease [class*=el-icon] {
  904. -webkit-transform: scale(0.8);
  905. transform: scale(0.8); }
  906. .el-input-number--mini .el-input__inner {
  907. padding-left: 35px;
  908. padding-right: 35px; }
  909. .el-input-number.is-without-controls .el-input__inner {
  910. padding-left: 15px;
  911. padding-right: 15px; }
  912. .el-input-number.is-controls-right .el-input__inner {
  913. padding-left: 15px;
  914. padding-right: 50px; }
  915. .el-input-number.is-controls-right .el-input-number__increase, .el-input-number.is-controls-right .el-input-number__decrease {
  916. height: auto;
  917. line-height: 19px; }
  918. .el-input-number.is-controls-right .el-input-number__increase [class*=el-icon], .el-input-number.is-controls-right .el-input-number__decrease [class*=el-icon] {
  919. -webkit-transform: scale(0.8);
  920. transform: scale(0.8); }
  921. .el-input-number.is-controls-right .el-input-number__increase {
  922. border-radius: 0 4px 0 0;
  923. border-bottom: 1px solid #DCDFE6; }
  924. .el-input-number.is-controls-right .el-input-number__decrease {
  925. right: 1px;
  926. bottom: 1px;
  927. top: auto;
  928. left: auto;
  929. border-right: none;
  930. border-left: 1px solid #DCDFE6;
  931. border-radius: 0 0 4px 0; }
  932. .el-input-number.is-controls-right[class*=medium] [class*=increase], .el-input-number.is-controls-right[class*=medium] [class*=decrease] {
  933. line-height: 17px; }
  934. .el-input-number.is-controls-right[class*=small] [class*=increase], .el-input-number.is-controls-right[class*=small] [class*=decrease] {
  935. line-height: 15px; }
  936. .el-input-number.is-controls-right[class*=mini] [class*=increase], .el-input-number.is-controls-right[class*=mini] [class*=decrease] {
  937. line-height: 13px; }