Позиционирование ввода внутри div

Question

У меня есть div контейнер .Между этим div у меня есть еще один div с именем модель , и есть input файл типа.Теперь, когда я открываю это в моем браузере mozilla firefox , все выглядит хорошо.Проблема в том, что когда я щелкнул Browse..., он не открывается, чтобы загрузить файл, но когда я щелкнул за пределами поля Browse..., он открывается, чтобы загрузить файл.Вот мой HTML-файл

 input{
          margin-bottom: 15px;
          padding: 10px;
          width: 100%;
          box-sizing: border-box;
          border-radius: 5px;
          height: 50px;
          border:0px; 
          font-family: georgia;
          font-size: 12pt;
          text-align: center;
        }

 <div class="container">
    <div class="model">
        <form>
          <div>
            <label>Profile Picture</label>
            <input type="file" name="img">
          </div>
        </form>
     </div>
</div>



      

Я просмотрел его в Google, но не нашел ни одного хорошего ресурса, который помог бы решить эту проблему.Sugesstion, пожалуйста.Спасибо!

Answer 1

В качестве способа отладки области кнопки вы можете использовать атрибут outline.Вы устанавливаете width: 100%, поэтому он принимает всю строку как блок.

Добавление атрибута outline и вы можете его увидеть.

 input{
          margin-bottom: 15px;
          width: 85px;
          box-sizing: border-box;
          border-radius: 5px;
          height: 40px;
          border:0px; 
          font-family: georgia;
          font-size: 12pt;
          text-align: center;
          outline: 1px solid #FF0000;
        }

 <div class="container">
    <div class="model">
        <form>
          <div>
            <label>Profile Picture</label>
            <input type="file" name="img">
          </div>
        </form>
     </div>
</div>



      

Answer 2

Вам нужно немного изменить свой CSS-код.Попробуйте это.

 input {
   margin-bottom: 15px;
   margin-top: 15px;
   box-sizing: border-box;
   border-radius: 5px;
   height: 50px;
   border: 0px;
   font-family: georgia;
   font-size: 12pt;
   display: block;
 }