Есть страничка. К ней подключен bootstrap.
/* CSS должен применяться после bootstrap.min.css,
но StackOverflow этого не позволяет */
label {
font-weight: 100;
}
.search-from-group .input-group {
width: 40%;
margin: 0 auto;
}
input {
border-radius: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container search-from-group">
<div class="row text-center">
<form action="" method="get">
<p class="text-center"><label for="link-to-group-field">1212sdfле:</label></p>
<div class="input-group">
<input placeholder="https://vk.com/licey_pri_ulgtu" class="form-control" id="link-to-group-field" name="link-to-group" type="text">
</div>
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Обратите внимание на style input
'а. Только написав напрямую, в теге, border-radius: 10px
получается изменить радиус закругления. Но если вынести стиль в отдельный файл и убрать style в теге, то стиль не применяется.
input {
border-radius: 50px !imortant;
}
#link-to-group-field {
border-radius: 50px !imortant;
}
Ни одна из этих конструкций не хочет работать. Вопросов несколько: почему? Как узнать приоритеты, который расставил браузер? Почему не работает !important?