CSS-在WordPress站点中带有内部按钮的输入字段

Question

I am not very good in css and designing websites.

I don't get the rid of it.

I want to add an input field with inside button for submit. This is all inside a wordpress website as a shortcode.

It should look like this:

HTML

 .event_form_autocomplete { width: 90%; padding: 15px; border: 1px solid #002652; color: #002652; font-size: 15px; } .event_form_submit { margin-left: -59px; padding: 14px; width: 50px; background: #002652; color: white; border: 0; } .event_form_arrow { color: white; position: absolute; margin-top: 17px; margin-left: -23px; } 

 <input class="form-control event_form_autocomplete" id="autocomplete" name="eventAdress" placeholder="Bitte gebe Sie Ihre PLZ oder Ort ein ..." onFocus="geolocate()" type="text" required> <input class="event_form_submit" type="submit" value="" /><i class="event_form_arrow icon-right-open white"></i> 

http://jsfiddle.net/s5GVh/2953/

But it looks like this in

Mozilla

Safari

Opera

Chrome

All with the newest version.

Answer 1

Try this code

HTML

 <div class="input-wrapper"> <input class="form-control event_form_autocomplete" id="autocomplete" name="eventAdress" placeholder="Bitte gebe Sie Ihre PLZ oder Ort ein ..." onFocus="geolocate()" type="text" required> <button class="event_form_submit" type="submit" value="" /><i class="event_form_arrow icon-right-open white"></i></button> </div> 

CSS

 .input-wrapper{ position: relative; border: 1px solid #002652; } .event_form_autocomplete { width: 100%; padding: 15px; color: #002652; font-size: 15px; border-width: 0; box-sizing: border-box; } .event_form_submit { margin: 0; padding: 14px; width: 50px; background: #002652; color: white; border: 0; position: absolute; top: 4px; right: 4px; height: 39px; } .event_form_arrow { color: white; position: absolute; margin-top: 17px; margin-left: -23px; } 

Answer 2

Hope it's work for you -webkit-padding-before:10px;

.event_form_submit {
    margin-left: -59px;
    padding: 14px;
    -webkit-padding-before:10px;
    width: 50px;
    background: #002652;
    color: white;
    border: 0;
}