选择选项标记的CSS代码

Question

我在索引页面中有一个表单，我使用相同的css代码进行输入和选择，但问题是在输入标签中它的工作正常，因为我想要但在select标签中首先宽度变得有点小而在我的时候我选择了它没有被选中的选项虽然在MAC chrome中工作正常，但在Windows Chrome中它没有被选中!!

请检查我的代码，让我知道我哪里出错了！

#contact-form input[type="text"],
#contact-form select[type="text"],
#contact-form textarea {
  width: 247px;
  max-width: 100%;
  padding: 16px 10px;
  background: #4f5662;
  border: 1px solid #828fac;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  box-sizing: content-box;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  color: #b6b7b8;
  font-size: 14px;
  font-family: helvetica;
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  -o-box-shadow: none;
  margin-right: 18px;
}

#contact-form input[type="submit"],
.newsleter-widget input[type="submit"] {
  float: right;
  font-size: 14px;
  color: #fff;
  font-family: 'Noto Sans', sans-serif;
  text-transform: uppercase;
  background: #8248ac;
  padding: 20px 13px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  border: none;
}

#contact-form input[type="text"],
#contact-form select[type="text"],
#contact-form2 textarea {
  margin-right: 0;
  display: block;
  width: 94%;
  max-width: 94%;
  margin-bottom: 19px;
  padding: 16px 3%
}

#contact-form textarea,
#contact-form2 textarea {
  height: 110px;
  padding: 8px 3%;
}

#contact-form input[type="submit"],
#contact-form2 input[type="submit"] {
  display: block;
  float: right;
  padding: 20px 38px;
}

<div class="span4">
  <h3>Contact Form</h3>
  <form id="contact-form">
    <input type="text" name="name" class="name" placeholder="Name">
    <input type="text" name="email" class="email" placeholder="Email address">
    <input type="text" name="email" class="email" placeholder="Phone no">
    <select type="text" name="service">
				<option value="" selected >Select Services</option>
				<option value="" >Option 1</option>
				<option value="" >Option 2</option>
				<option value="" >Option 3</option>
		</select>
    <input type="submit" name="submit-form" id="submit" value="Send Message">
  </form>
</div>

当我在这里粘贴代码时，选项标签虽然被选中，但在我的代码中却没有被选中!!但是在这里，与输入标签相比，select标签的宽度仍然略小。

现在它看起来像

Answer 1

您必须将box-sizing属性用于大小调整属性（宽度和高度）中应包含的属性 对于您的问题box-sizing: border-box，width和margin属性中的一些修改将执行此任务。

以下是同一https://jsfiddle.net/c7Lojau2/

的小提琴