title: How to change input size in semantic ui?
body: <p>I want to adjust width and height of input box in sementic ui but it is not working why so ?</p>
  
  <p>code:</p>
  
  <p>index.html:</p>
  
  <pre><code>&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>login.js:</p>
  
  <pre><code>export default class Login extends Component {
    render() {
      return (
        &lt;div&gt;
          &lt;h5&gt;Please login below&lt;/h5&gt;
          &lt;form className="ui form"&gt;
              &lt;div className="field"&gt;
                  &lt;label&gt;URN Number&lt;/label&gt;
                  &lt;input className="fname" type="text" name="number" placeholder="Enter URN number"/&gt;
              &lt;/div&gt;
              &lt;div className="field"&gt;
                  &lt;label&gt;Password&lt;/label&gt;
                  &lt;input className="pwd" type="text" name="password" placeholder="Enter Password"/&gt;
              &lt;/div&gt;
              &lt;button className="ui button" type="submit"&gt;Submit&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      )
    }
  }
  </code></pre>
  
  <p>I want to reduce size of input box how can I do it ?</p>
  
  <p>What I tried :</p>
  
  <p>1) </p>
  
  <pre><code>form .fname {
          width: 60px;
      }
  </code></pre>
  
  <p>2) </p>
  
  <pre><code>.ui.input {
      width: 200px;
      height: 40px;
  }
  </code></pre>
  
  <p>3)</p>
  
  <pre><code>.fname {
  width: 50px;
  }
  </code></pre>
  
  <p>None of the above works why so ?</p>
  
  <p>See screenshot below:
  <a href="https://i.stack.imgur.com/yQWMI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yQWMI.png" alt="enter image description here"></a></p>