The input placeholder text in Safari 5.1.7 is unable to be centered

Check out my code snippet below:

HTML:

<input type="text" name="Surname" placeholder="Surname" id="surname">

CSS:

::i-block-chroms, input[placeholder]::-webkit-input-placeholder { 
      text-align:center;
}
::-webkit-input-placeholder { 
      text-align:center;
}
input::-webkit-input-placeholder { 
      text-align:center;
}

I have tried various ways to align the placeholder text center, including adding text-align:center; directly to the input field, but unfortunately, I have not been successful. Unsure of what else to try at this point.

jqueryhtmlcsssafari

Answer №1

perhaps?

Vue(function () {

    $('[placeholder]').focus(function () {
        var input = $(this);
        if (input.val() == input.attr('placeholder')) {
            if (this.originalType) {
                this.type = this.originalType;
                delete this.originalType;
            }
            input.val('');
            input.removeClass('placeholder');
        }
    }).blur(function () {
        var input = $(this);
        if (input.val() == '') {
            if (this.type == 'text') {
                this.originalType = this.type;
                this.type = 'text';
            }
            input.addClass('placeholder');
            input.val(input.attr('placeholder'));
        }
    }).blur();
    
});
*{
    padding: 0;
    margin: 0;
}
body{
    margin: 30px;
}
input {
box-sizing: border-box;
width: 100%;
padding: 1em;
text-align: center;
}

::i-block-chroms, 
input[placeholder]::-webkit-input-placeholder { 
      text-align:center;
}
::-webkit-input-placeholder { 
      text-align:center;
}
input::-webkit-input-placeholder { 
      text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" name="Lastname" placeholder="Lastname" id="lastname">

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

The first ajax request went off without a hitch, but the second one hit a snag and displayed a parse error

I am facing an issue with two Ajax calls that have similar lines but only one of them seems to be working correctly. First Ajax post : $("#languageswitcher").change(function(){ var locale=$(this).val(); //alert(111); //console.log(111) ...

javascriptjqueryjsonajaxlaravel-5

Creating a pop-up effect for a div in the center of a table cell using HTML and CSS

I am currently working with Angular and facing a challenge where I need to display a div like a popup in a table cell when clicked. Despite having the click event logic in place, I am unsure of how to achieve this without using external libraries such as B ...

javascripthtmlcssangularhtml-table

How can you use JavaScript to create hyperlinks for every occurrence of $WORD in a text without altering the original content?

I've hit a bit of a roadblock. I'm currently working with StockTwits data and their API requires linking 'cashtags' (similar to hashtags but using $ instead of #). The input data I have is This is my amazing message with a stock $sym ...

javascripthtmlreactjs

Issue encountered while submitting form on JQuery Mobile framework

Currently, I am in the process of developing a small web application utilizing JQuery Mobile and Multi Page architecture. The issue arises on my form as the second page. Upon clicking the submit button, an error message is displayed on my console (error i ...

javascriptjqueryhtml

Is there a way to automatically scroll the page to the main content as soon as the user begins scrolling?

On my website, I want to have a full-screen image at the top followed by the main content right below it. I am looking for a way to automatically scroll the page down to the main content as soon as the user starts scrolling. How can I achieve this using ...

jqueryhtmlcss

Using JSON with a jQuery AJAX function

Hello everyone! I'm relatively new to the world of AJAX and I'm having trouble figuring out what's wrong with my code. I'm creating a form that should display content from a database using autocomplete. I'm attempting to update a ...

javascriptphpjqueryajaxautocomplete

Make sure to wait for the completion of the ajax request before proceeding with the continuation of the

Currently, I am utilizing jQuery ajax to validate a registration form. Below is the code snippet I am using: $("input.register_input").each(function() { name= this.name; $(".ono#"+name).html("<img src=&apo ...

phpjqueryajax

Enhance user experience by implementing an autocomplete feature for a text input field

Can you name the process in which a form is automatically filled using database information without needing to refresh the page? One common example of this technique is seen on platforms like Google or Facebook, where they predict friends you may be searc ...

javascriptjqueryajaxdatabasehtml

What is the process of incorporating a video into a react.js project through the use of the HTML

I'm experiencing an issue where my video player loads, but the video itself does not. Can anyone shed light on why this might be happening? class App extends Component { render() { return ( <div className="App& ...

javascripthtmlreactjs

When I try to share a link to my website on Google Plus, the thumbnail does not appear

Previously, I encountered a similar issue on Facebook, but by utilizing the following tag, I was able to resolve it: <meta property="og:image" content="link to image" /> The dimensions of the image in the "link to image" are 200px x 200px, which me ...

facebookhtmlgoogle-plus

The collapse feature of Bootstrap 5 navbar is experiencing delays

Can anyone assist me with the bootstrap navbar collapse issue I am facing? When I click on the burger menu, there is a slight delay of less than a second before it fully expands. Additionally, if I click very quickly multiple times on the burger icon, the ...

cssanimationnavigationbootstrap-5

Exploring the capabilities of qTip2 integrated with jQuery Vector Maps (jqvmap)

Is there a way to disable the default tooltip in jqvmap and replace it with qTip2? Check out this example. Here's the jQuery code: jQuery('#vmap').vectorMap({ map: 'world_en', backgroundColor: null, color: '#ffff ...

javascriptjqueryqtip2jqvmap

I am looking for a way to display multiple images when the user clicks a button. It needs to be done

After successfully implementing a draggable single circle image when clicking a button, I am now looking to add multiple circle images each time the button is clicked. I'm considering using the append function with the canvas tag for this purpose. Ca ...

jqueryjquery-uicsshtml5-canvas

Image floating gracefully in the top corner of the screen

Check out this Picture I am trying to create a floating image similar to the one in the top left corner of the navigation bar. After searching for some code to achieve this, I came across the following: <html> <head></head> <bod ...

htmlcss

showcasing a map on an HTML webpage

Seeking advice on integrating a map feature in HTML to mark store locations. Working on an app for a business community and need help with this specific functionality. Your assistance would be greatly appreciated! ...

javascripthtml

If the browser fails to fetch a page or a link is unresponsive when navigating to the current page

When a link in the Browser, either does not fetch a page or the link is not working when pointing to the current page, it can be frustrating. I encountered this issue with a link in a menu while working on a project. Specifically, when a user is on the Get ...

htmlasp.netasp.net-mvcinternet-explorergoogle-chrome

How can I use handlebars to display a video when the user clicks on an image?

I'm currently working on a webpage where I want to be able to show a hidden video when the user clicks on an image tag. I've implemented this using handlebars. Additionally, I want the video to close when the user clicks on another photo. < ...

javascripthtmlhandlebars.js

What is the best way to retrieve the textbox value when its associated checkboxes have been selected?

Upon selecting a checkbox and entering data into the linked textbox, upon submission I aim to reveal a form showcasing both the entered text and which checkboxes were selected. ...

phphtml

What is the method for setting tabstops in XHTML?

Is there a way to create a tabstop in an xhtml webpage without using the "&nbsp;" method? I want to avoid putting a space between the ampersand and 'n'. Any suggestions? Edit: My initial post did not display the &nbsp;. I am looking for ...

htmlcssxhtml

the combination of thickbox and ajax leads to a seamless user

Can you help me with a puzzling issue I'm facing? I need to send data to a server (php) and then display the processed result using thickbox iframe. I tried looking at an ajax example in thickbox, but it doesn't cover passing, processing, and re ...

phpjqueryajaxthickbox