Разве `min-width` не работает на элементах формы` input [type = "button"] `? - PullRequest
Новая
       13

Разве `min-width` не работает на элементах формы` input [type = "button"] `?

9 голосов
/ 24 ноября 2010

Кто-нибудь видит причину, почему это не работает?(работает с width, только не min-width) 

input[type="button"] {
    min-width: 100px;
}

РЕДАКТИРОВАТЬ: уточнение

  • Селектор "кнопка" работает с width,только не min-width
  • min-width работает с другими элементами, только не селектор "кнопки"
  • Это на chrome / safari.Не проблема IE.

Ответы [ 6 ]

3 голосов
/ 15 ноября 2013

При изучении этого ответа я обнаружил, что изменение свойства кнопки border-color также включает свойство CSS min-width в Chrome.(Он также отключает несколько встроенных свойств, например, цвет фона кнопки по умолчанию, поэтому используйте его с осторожностью.)

2 голосов
/ 25 августа 2013

Я тоже столкнулся с этой проблемой. min-width работает, но может не дать ожидаемых результатов или может не работать из-за кнопок с box-sizing по умолчанию border-box. Попробуйте установить box-sizing: content-box на кнопку.

2 голосов
/ 26 октября 2012

минимальная ширина должна работать идеально, вы просто не можете видеть эффекты, может быть, потому что вы делаете минимальную ширину меньше ширины ... в любом случае пример для тонкого HTML-кода: 

<input type="button" style="width:50px;height:5em;min-width:40px;"
1 голос
/ 25 сентября 2012

Да ... это работает, если вы стилизуете это так: 

input[type="submit"], button, .button, a.actionlink {
    cursor: pointer;
    display: inline-block;
    font-family: "Arial","Verdana","Helvetica","sans-serif";
    font-size: 12px;
    font-weight: bold;
    min-width: 85px;
    -moz-outline: 0 none;
    outline: 0 none;
    padding-bottom: 7px;
    padding-top: 7px;
    text-align: center;
}
0 голосов
/ 15 сентября 2015

Я только что столкнулся с такой проблемой и нашел способ ее исправить. Но с помощью тега кнопки, а не ввода. 

input[type="button"] {
    min-width:100px;
}

- [изменить на] -> 

button {
    width:auto;
    min-width:100px;
}
0 голосов
/ 24 ноября 2010

min-width не поддерживается и / или содержит ошибки в более старых версиях Internet Explorer.

Вы можете увидеть таблицу совместимости здесь .

ВотПример использования min-width для элемента form, всегда целесообразно также установить для него свойство width. 

<html>
<head>
<title>TAG index</title>

<style type="text/css">

.example {
  width: 100%;
  max-width: 600px;
  min-width: 500px;
}

textarea {
  height: 10em;
}

</style>

</head>

<body>

<p>minimum width:500px - maximum width:600px</p>

<form method="POST" action="example.cgi">

  <p><input type="text" name="item1" class="example"></p>

  <p><select name="item2" class="example">
    <option value="select1">Select1</option>
    <option value="select2">Select2</option>
    <option value="select3">Select3</option>
  </select></p>

  <p><textarea name="item3" cols="50" rows="10" class="example"></textarea></p>

</form>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...