CODEWITHSUNDEEP
csssafari
kosher
kosher

Reputation: 333

Safari border-color for text input

I have a number of inputs of type text that I have placed a border and border-color around. They show up fine in Chrome, but in Safari the border is the color I selected on two sides and a basic blue on the other two sides. There is no problem with the border of a textfield I have in the same page. But a submit button does not have the correct border color either.

enter image description here

HTML:

<label for="email">Email address</label>
<input type="text" id="email" name="email" />

<label for="telephone">Phone number</label>
<input type="text" id="telephone" name="telephone" />

<label for="notes">Notes</label>
<textarea type="textarea" id="notes" name="notes" /></textarea>

<input type="submit" id="submit" value="Send" />

CSS:

input, textarea, {
  display: block;
  width: 200px;
  height: 20px;
  margin: 0 !important;
  margin-bottom: 10px !important;
  padding: 0 !important;
  padding: 4px 8px !important;
  font-size: 16px;
  background-color: lightgrey;
  border-width: 2px !important;
  border-radius: 4px;
  border-color: #001b43;
  outline: none;
}

Searching around, I have found a few related problems and solutions and have tried them, but with no joy. For example:

input.text,
input[type=text],
input[type=email],
input[type=tel],
input[type=url],
input[type=search] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
}

Upvotes: 1

Views: 3080

Answers (1)

kosher
kosher

Reputation: 333

I passed my question on to a friend. He figured it out quickly. The solution is:

border-style: solid;

Upvotes: 4

Related Questions