Safari causing placeholders to be sliced

I'm having trouble creating attractive placeholders in Safari. This is how it currently appears.

Codepen: https://codepen.io/anon/pen/RLWrrK

.form-control {
  height: 45px;
  padding: 15px;
  font-size: 16px;
  color: #8c8c8c;
  background-color: #f5f5f5;
  border: 1px solid #d1d1d1;
  box-shadow: none;
  font-weight: 300;
}

.form-control:focus {
  box-shadow: none;
  color: #793a93;
  border-color: #793a93;
}

.form-control::-moz-placeholder {
  color: #8c8c8c;
  opacity: 1;
}

.form-control:-ms-input-placeholder {
  color: #8c8c8c;
}

.form-control::-webkit-input-placeholder {
  color: #8c8c8c;
}

.form-control:focus::-moz-placeholder {
  color: #793a93;
  opacity: 1;
}

.form-control:focus:-ms-input-placeholder {
  color: #793a93;
}

.form-control:focus::-webkit-input-placeholder {
  color: #793a93;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-6 col-sm-6 col-xs-12 contact-form">
  <form>
    <div class="row">
      <div class="col-md-6 col-sm-12">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="First Name">
        </div>
      </div>
      <div class="col-md-6 col-sm-12">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Last Name">
        </div>
      </div>
      <div class="col-md-6 col-sm-12">
        <div class="form-group">
          <input type="tel" class="form-control" placeholder="Phone Number">
        </div>
      </div>
      <div class="col-md-6 col-sm-12">
        <div class="form-group">
          <input type="email" class="form-control" placeholder="Email Address">
        </div>
      </div>
    </div>
  </form>
</div>

htmlcsstwitter-bootstrap

Answer №1

To improve the design, consider removing the padding from .form-control.

Answer №2

Check out this interesting article: Why Safari and Firefox truncate the bottom of input text?

Solution is to simply eliminate padding on .form-control

Answer №3

You should definitely give this code a try, as it was successful for me

input::placeholder {
    overflow: visible;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Replace the bullet icon with a double quote symbol

My HTML List needs a different look - I want to change the bullet icon into a double quote icon. A website that I found interesting is this one. Here's the CSS code I have: .listStyle li:before { list-style: none; content: "\00BB"; } < ...

htmlcsshtml-listspseudo-element

Safari is truncating the box-shadow of an element enclosed within a button

I'm struggling with a button that has an element inside receiving a box-shadow: button { padding: 0; border: 0; margin: 0; overflow: visible; -webkit-appearance: none; background: white; } .shadow { display: inline-block; vertical- ...

csssafaribox-shadow

Unable to retrieve the iframe variable from the parent as it returns undefined

I am trying to retrieve a variable within an iframe from the parent index.html. Here is the index.html code: <!doctype html> <html lang="en-us> <head> <title>Test</title> </head> <body> <p>Test& ...

javascripthtmliframe

Error: The @use directive must come before any other rules in Angular

Error message: Issue: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): Error Details: HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js) ...

cssangulartypescriptsass

To enable the radio button upon clicking the list item in JavaScript, simply check the radio button

I am working with radio buttons Here is the HTML code: <input type="radio" class="first" name="bright" checked> <input type="radio" class="second" name="bright" > <input type=" ...

javascripthtml

jQuery struggling to parse HTML retrieved through AJAX call

While working on parsing some XML data received from an AJAX request, I encountered a special case that required additional handling. Occasionally, the server would return HTML content, prompting the need for a page reload. However, when attempting to iden ...

jqueryhtmlxmlajaxmeta-tags

"Maximizing battery life: Efficient video playback on iOS in low power

Summary: I am currently working on a website that features a video set as the background which autoplays. However, I have encountered an issue on iOS devices when "Low Power Mode" is activated - the video fails to play and instead displays a large "Play" i ...

javascripthtmlcssioswordpress

Top scroll button malfunctioning on this page

Updated question for better understanding. In my current project, let's imagine I am on the following URL: http://127.0.0.1:8000/blog/ and within that page I have the following HTML: <a href="#top">Back to top</a> Upon hovering over tha ...

html

Ensure that a div element expands to 100% of its parent's height when its child's height is less than 100%

I am struggling with a flex div that contains 2 elements. I want both elements to take up the full parent height while their content remains at auto height, but I keep getting the inner content height. Here is my code: <html lang="en"> <head&g ...

htmlcss

navigating to the start of a hyperlink

I'm having issues with scrolling to anchors and encountering 3 specific problems: If I hover over two panels and click a link to one of them, nothing happens. When I'm on section D and click on section C, it scrolls to the end of section C. ...

javascriptjqueryhtmlcss

Update cursor when hovering over a button

What can I do to make the cursor change to a hand when hovering over my submit button? Currently, the cursor remains as the standard arrow and does not switch when placed on the button. The code for my button is: <button>Submit</button> ...

htmlbutton

Using jQuery to dynamically insert an HTML element into a table

I'm trying to insert a hyperlink into an empty HTML table. This function works perfectly fine on Firefox and Chrome, taking only 0.2 seconds to load. However, when I try it on IE9, it takes at least 3 minutes to display the link. The issue seems to be ...

jqueryhtmladdition

Adjust the color of the font within a div element when hovering over it

I've been attempting to modify the text color and add an underline when a user hovers over it. Despite trying various methods, I haven't been successful. I scoured the internet for a solution but couldn't find one that met my specific requi ...

javascripthtmlcss

Consistently Incorrect Date Formatting in Bootstrap Display

I have a potential issue with my date display. It should show a default "Start Date" in a short date format, but when the "Sale Date" DropDownBoxFor is toggled, it should display an AJAX result date. However, the display always appears in a date and time f ...

javascriptc#jqueryajaxtwitter-bootstrap

What is the best way to format a condensed script into a single line?

There are times when the script in the web browser is packed into one line like function a(b){if(c==1){}else{}}. I have attempted to locate something that would display it in a more normal format. function a(b) { if(c==1) { } else { } } Howev ...

javascripthtmlbrowser

Error in Layout of Navigation Panel and Tabbed Pages

Working on a school project, I encountered a challenge. I found two useful solutions from the W3 website - a sticky navigation bar and the ability to include tabs on a single page for a cleaner presentation of information. However, when trying to implement ...

javascripthtmlcssformattinguinavigationbar

The userscript will keep the window open as long as it remains inactive

Hello everyone, I'm excited to join the StackOverflow community and dive into userscripts for the first time! Putting aside any unnecessary details, I'm encountering a small issue with a script I recently created. (function () { $("#enbut"). ...

javascriptjqueryhtml

Is SimpleHTTPServer included in the package?

Lately, I've been experimenting with the Python SimpleHTTPServer in Mac OS X Bash instead of MAMP to assist with front-end templating. I appreciate its user-friendly nature, but I'm curious if there is a method to incorporate includes for repeate ...

pythonhtmlbashstatic

Tips for creating a subclass using jQuery

I am familiar with selecting the class "myClass" using $(".myClass"), but my question is how do I select the child link within an element with the class "myClass" using jQuery? Here is a sample of the code: <a href=#>Home</a> <div class ...

jqueryhtmlcss

Does the frame take precedence over the button?

const div = document.createElement('div'); // creating a dynamic div element div.setAttribute('id', "layer1"); // setting an id for the div div.className = "top"; // applying a customized CSS class div.style.position = "absolute"; // sp ...

javascripthtmliframegreasemonkeyframe