Reducing space between icon and label name

Viewed 48

I have the below form in react.

enter image description here

I need to reduce the space between the list-icon and the label. I am using the below CSS for the same.

.form__container {
  display: flex;
  flex-wrap: wrap;
}

.form__container input {
  color: rgb(115, 0, 255);
  size: 100%;
  position: relative;
  flex-wrap: wrap;
  width: 300px;

}

.form__container li ul {
  flex-wrap: nowrap;
  width: 100px;
}

Below is my react component.

  return (
      <div>
        <FormValidator emitter={this.emitter} />
        <div >
          <form encType='multipart/form-data' action={this.props.form_action} method={this.props.form_method}
 className='form__container'>
                { this.props.authenticity_token &&
                  <div style={formTokenStyle}>
                    <input name='utf8' type='hidden' value='&#x2713;' />
                    <input name='authenticity_token' type='hidden' value={this.props.authenticity_token} />
                    <input name='task_id' type='hidden' value={this.props.task_id} />
                  </div>
                }
                {items}
              </form>
              <div>
                {validationList}
              </div>
            </div>
          </div>
        )

Can anyone please help me with this?

1 Answers

To fix this issue, you just need to use input[type=text] See my demo below:

input[type=text] {
  width: 300px;
}
<form>
  <div>
      <label for="fname">Name</label>
      <input type="text" id="fname" name="fname">
  </div>
  <div><input type="checkbox" /> Check me!</div>
</form>

Related