Как скрыть поле ввода имени перед загрузкой файла

Question

Я хочу скрыть ввод имени файла. Я попробовал его в CSS, но он не работает. После просмотра файла я хочу показать имя входного файла. Возможно ли это в CSS?

.input-group-btn{ 
 
    width:10px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> 
 
<div class="input-group"> 
 
    <span class="input-group-btn"> 
 
    <span class="btn btn-primary" onclick="$(this).parent().find('input[type=file]').click();">Choose File</span> 
 
    <input name="uploaded_file" onchange="$(this).parent().parent().find('.form-control').html($(this).val().split(/[\\|/]/).pop());" style="display: none;" type="file"> 
 
    </span> 
 
    <span class="form-control"></span> 
 
</div>

Answer 1

Собственно код Камиль является правильным, эта строка, которую вы видите, генерируется iframe, который содержит код, но предназначен только для stacko ver, я только что добавил <br/> и теперь выглядит нормально.

.input-group-btn{ 
 
    width:10px; 
 
} 
 
.yourHiddenClassName:empty{ 
 
    display:none !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> 
 
<br/><br/><div class="input-group"> 
 
    <span class="input-group-btn"> 
 
    <span class="btn btn-primary" onclick="$(this).parent().find('input[type=file]').click();">Choose File</span> 
 
    <input name="uploaded_file" onchange="$(this).parent().parent().find('.form-control').html($(this).val().split(/[\\|/]/).pop());" style="display: none;" type="file"> 
 
    </span> 
 
    <span class="form-control yourHiddenClassName"></span> 
 
</div>

Answer 2

Я не уверен, если правильно понял, но здесь изменяется фрагмент кода:

.input-group-btn{ 
 
    width:10px; 
 
} 
 
.yourHiddenClassName:empty{ 
 
    display:none !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css"> 
 
<div class="input-group"> 
 
    <span class="input-group-btn"> 
 
    <span class="btn btn-primary" onclick="$(this).parent().find('input[type=file]').click();">Choose File</span> 
 
    <input name="uploaded_file" onchange="$(this).parent().parent().find('.form-control').html($(this).val().split(/[\\|/]/).pop());" style="display: none;" type="file"> 
 
    </span> 
 
    <span class="form-control yourHiddenClassName"></span> 
 
</div>