Fix search-input with Select

components/input/style/index.less

@@ -1,6 +1,7 @@
 @import "../../style/themes/default";
 @import "../../style/mixins/index";
 @import "./mixin";
+@import "./search-input";
 
 // Input styles
 .ant-input {

components/input/style/search-input.less

@@ -0,0 +1,41 @@
+@import "../../style/themes/default";
+@import "../../style/mixins/index";
+@import "../../button/style/mixin";
+@import "./mixin";
+
+.ant-search-input-wrapper {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.ant-search-input {
+  &.ant-input-group .ant-input:first-child,
+  &.ant-input-group .ant-select:first-child {
+    border-radius: @border-radius-base;
+    position: absolute;
+    top: -1px;
+    width: 100%;
+  }
+
+  .ant-search-btn {
+    .btn-default;
+    border-radius: 0 @border-radius-base - 1 @border-radius-base - 1 0;
+    left: -1px;
+    position: relative;
+    border-width: 0 0 0 1px;
+    z-index: 2;
+    padding-left: 8px;
+    padding-right: 8px;
+    &:hover {
+      border-color: @border-color-base;
+    }
+    form & {
+      padding-top: 6px;
+      padding-bottom: 6px;
+    }
+  }
+  &&-focus .ant-search-btn-noempty,
+  &:hover .ant-search-btn-noempty {
+    .btn-primary;
+  }
+}

components/select/demo/search-box.md

@@ -76,26 +76,28 @@ const SearchInput = React.createClass({
     });
     const options = this.state.data.map(d => <Option key={d.value}>{d.text}</Option>);
     return (
-      <Input.Group className={searchCls} style={this.props.style}>
-        <Select
-          combobox
-          value={this.state.value}
-          placeholder={this.props.placeholder}
-          notFoundContent=""
-          defaultActiveFirstOption={false}
-          showArrow={false}
-          filterOption={false}
-          onChange={this.handleChange}
-          onFocus={this.handleFocusBlur}
-          onBlur={this.handleFocusBlur}>
-          {options}
-        </Select>
-        <div className="ant-input-group-wrap">
-          <Button className={btnCls} onClick={this.handleSubmit}>
-            <Icon type="search" />
-          </Button>
-        </div>
-      </Input.Group>
+      <div className="ant-search-input-wrapper" style={this.props.style}>
+        <Input.Group className={searchCls}>
+          <Select
+            combobox
+            value={this.state.value}
+            placeholder={this.props.placeholder}
+            notFoundContent=""
+            defaultActiveFirstOption={false}
+            showArrow={false}
+            filterOption={false}
+            onChange={this.handleChange}
+            onFocus={this.handleFocusBlur}
+            onBlur={this.handleFocusBlur}>
+            {options}
+          </Select>
+          <div className="ant-input-group-wrap">
+            <Button className={btnCls} onClick={this.handleSubmit}>
+              <Icon type="search" />
+            </Button>
+          </div>
+        </Input.Group>
+      </div>
     );
   },
 });

components/select/demo/size.md

@@ -41,4 +41,8 @@ ReactDOM.render(
 .code-box-demo .ant-select {
   margin: 0 8px 10px 0;
 }
+
+#components-select-demo-search-box .code-box-demo .ant-select {
+  margin: 0;
+}
 ````

components/select/style/index.js

@@ -1,2 +1,5 @@
 import '../../style/index.less';
 import './index.less';
+
+// style dependencies
+import '../../input/style';

components/select/style/index.less

@@ -512,11 +512,3 @@
     }
   }
 }
-
-.ant-search-input .@{select-prefix-cls} {
-  width: 100%;
-
-  & + .ant-input-group-wrap > button {
-    top: -5px;
-  }
-}