瀏覽代碼

input 样式美化

morphone1995 4 年之前
父節點
當前提交
7caf7bf133

+ 1 - 1
src/components/HistoryCaseContainer/HistoryList/index.jsx

@@ -458,7 +458,7 @@ class HistoryCaseContainer extends React.Component {
                 >                  
                     <div className={styles.outBox}>
                       <span>病历名称:</span>
-                      <input type="text" placeholder="请输入病历名称" value={this.state.templateName} onChange={this.handleChange} autocomplete="off"/>
+                      <input type="text" className={styles.innerInput} placeholder="请输入病历名称" value={this.state.templateName} onChange={this.handleChange} autocomplete="off"/>
                     </div>
                 </ConfirmModal>
             </div>

+ 14 - 1
src/components/HistoryCaseContainer/HistoryList/index.less

@@ -195,5 +195,18 @@
     display: flex;
     align-items: center;
 }
-
+.innerInput{
+    outline-style: none ;
+    border: 1px solid #ccc; 
+    border-radius: 3px;
+    padding: 7px 4px;
+    font-size: 14px;
+    font-family: "Microsoft soft";
+}
+.innerInput:focus{
+    border-color: #66afe9;
+    outline: 0;
+    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
+    box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
+}
 

+ 1 - 1
src/components/Operation/index.jsx

@@ -585,7 +585,7 @@ class Operation extends Component {
         <div className={style.outBox}>
           <div className={style.innerInp}>
             <span>病历名称:</span>
-            <input type="text" placeholder="请输入病历名称" value={this.state.medicalName} onChange={this.handleMedicalChange} autocomplete="off" /> 
+            <input type="text" className={style.innerInput} placeholder="请输入病历名称" value={this.state.medicalName} onChange={this.handleMedicalChange} autocomplete="off" /> 
           </div>
           {this.state.showValit ? (<div className={style.valit}>请输入病历名称</div>) : null}
         </div>

+ 14 - 0
src/components/Operation/index.less

@@ -351,6 +351,20 @@
     // justify-content: center;
     margin-bottom: 40px;
     .innerInp{
+        .innerInput{
+            outline-style: none ;
+            border: 1px solid #ccc; 
+            border-radius: 3px;
+            padding: 7px 4px;
+            font-size: 14px;
+            font-family: "Microsoft soft";
+        }
+        .innerInput:focus{
+            border-color: #66afe9;
+            outline: 0;
+            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
+            box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
+        }
     }
     .valit{
         float: left;