Mike Mike - 10 months ago 45
HTML Question

How do i get space between my input fields in Firefox that appear on Chrome?

I want to have three input fields in a larger DIV, so I have

<input type="text" name="first_name" id="first_name" placeholder="First Name" class="searchField" style="width:23%" />
<input type="text" name="last_name" id="last_name" placeholder="Last Name" class="searchField" style="width:23%">
<input type="text" name="event" id="event" placeholder="Event" class="searchField" style="width:40%">

and I have these styles for the inputs

.searchField {
display: table-cell;
line-height: 40px;
font-size: 22px;
margin: 0;
vertical-align: middle;
padding: 5px;
border: 1px solid #ccc;
box-sizing: border-box;
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
-webkit-user-select: text;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
text-align: start;

However, I notice on Chrome I get space between each input field, which I like, whereas Firefox does not have such space — https://jsfiddle.net/4sjxum1k/12/ . How can I get space to appear between my inputs in Firefox like Chrome without adversely affecting Chrome?

Answer Source

I would suggest you change display:text-cell; to display:inline-block;. So the default word-spacing gets applied to your search fields.

Then you can even change the size of the space by wrapping those fields in a div and styling this div with e.g. word-spacing:10px;