styling the search input element in webkit with right-to-left text direction

I have included a search input in my code like this:

<input type="search" placeholder="search" />

Webkit has different styles for an input field with the type 'search'.

One of these styles is displaying a cancel ('x') button on the right side of the input when text is entered.

However, if you are using a language that reads from right to left such as Hebrew or Arabic, the webkit cancel button still appears on the right side instead of left.

You can see this behavior in this example.

  1. Do you think this is a bug in webkit?

  2. If it is indeed a bug, is there a workaround to keep using type="search" in my code?

htmlcsswebkitright-to-left

Answer №1

While some may deem it a bug, technically speaking, the absence of a specified behavior for the cancel button does not classify it as such. Rather, it can be seen as a flaw in design or an oversight in localization. This issue was officially documented as Bug 51499 on WebKit Bugzilla back in 2010, and unfortunately, it seems unlikely that it will be rectified in the near future.

Answer №2

For the sake of thoroughness, I recently discovered a clever solution to this issue in this helpful post

The snippet below allows you to customize and position the 'x' button as desired.

input[type="search"]::-webkit-search-cancel-button {

   /* Get rid of default appearance */
    -webkit-appearance: none;

    /* Apply your own custom styles */
    ...
    ...
}

Take a look at a LIVE DEMO for demonstration.

If needed, you can completely eliminate the webkit cancel button like so:

input[type="search"]::-webkit-search-cancel-button
{
  display: none;
}

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

How can I alter the background color while performing a transformation in JS/CSS?

I'm currently working on achieving a flipboard effect for some divs, where one side is white and the other is black. Here's what I have so far: setInterval(function () { document.getElementById('test').classList.toggle('flipped& ...

javascripthtmlcss

Unique hover effects for tab navigation

I have designed my website with 4 tabs on the homepage: holidays, hospitality, events, and consulting. I am trying to create an effect where hovering over the tabs displays images. Here is the code I have tried: HTML: <div class="menu_links"> & ...

htmlcss

Guide on retrieving data from a database and showcasing it on an HTML5 webpage using the combination of jqTouch and PhoneGap

I am currently working on developing an iPhone application for mobile health using a combination of HTML5, Javascript, jQTouch, and PhoneGap. This project is part of my school assignment aimed at gaining hands-on experience in building an iPhone app with t ...

jquerydatabasehtmlcordovajqtouch

What is the best way to incorporate regular, light, and bold fonts into your project using links from Google Fonts

I am looking for three specific styles of Ubuntu font without having to download them. To access these fonts, I inserted this link in the <link href="https://fonts.googleapis.com/css?family=Ubuntu:300,400,700" rel="stylesheet"> According to Google& ...

cssgoogle-fonts

Enhancing the layout of an ASP.NET master page with an HTML table that extends beyond the

My ASP.NET (VB) master page contains a table with 9 columns, each intended to hold textboxes. However, even without textboxes, the cells are extending beyond the content margins. How can I adjust them to fit within the master page margins? If they still ...

asp.nethtmlcssvb.netmaster-pages

Troubleshooting problem with Angular 2 in Internet Explorer related to the use of [style]="

I've encountered a challenge while using angular 2 (2.0.0-beta.17). The app works perfectly on most browsers, but as expected, IE 11 is causing trouble. The scripts included in the head for angular are: <script type='text/javascript' sr ...

javascripthtmlcssinternet-explorerangular

Transferring JavaScript to a different page using EJS

Feeling a little stuck here and could use some assistance. It seems like a simple issue, but I'm tired and could really use a fresh pair of eyes to take a look. I'm trying to pass the 'username' variable, but since I'm new to this ...

javascripthtmlnode.jsobjectejs

How to disable scrolling for React components with CSS styling

When incorporating a React component into my HTML, I follow this pattern: <html> <body> <div id=app>${appHtml}</div> <script src="/bundle.js"></script> </body> </html> Within my application, th ...

javascripthtmlcssreactjs

Obtain the index by clicking on an element within an HTMLCollection

Within my HTML code, I have 9 <div> elements with the class ".square". I am looking to make these divs clickable in order to track how many times each one is clicked and store that information in an array. For example, if the fifth <div> is c ...

javascripthtml

Is there still excess top padding or margin in Firefox after clearing the default reset for the <ul> element?

My floated horizontal list is looking great on IE and Opera, but for some reason, Firefox is adding extra padding or margin at the top. I'm not sure how to fix it. Everything was fine until I had to add a display:inline to an image link next to it to ...

csshtml-listscss-float

using javascript to change a link's state with a click action

I have a question that is related to the topic discussed here: Making a link stay active displaying hover effect upon click using javascript. I am looking for a way to disable the active class when the same link is clicked again. Any assistance on this mat ...

javascriptjqueryhtml

Transforming HTML with JavaScript

I am facing a challenge in my JavaScript application where I receive HTML code from an endpoint that contains radio buttons. Unfortunately, I cannot modify the HTML content coming from this endpoint. My goal is to convert these radio buttons into regular b ...

javascriptjqueryhtml

Tips for choosing the class=" * " using jQuery's .html() function

Is there a way to target the string "class" or any other specified string within code retrieved from .html()? If we have an element's HTML content stored in another element (similar to a snippet with preview) <div class="myClass">1</div> ...

jqueryhtmlregexhighlight

Firefox experiencing trouble handling flexbox overflow

Having some trouble with a test project that involves using flexbox. The task at hand is to create a dashboard with multiple lists of cards arranged side-by-side with infinite overflow. I was able to achieve this layout, however, the issue arises when eac ...

htmlcssangularjsfirefoxflexbox

Issue with Datepicker in Angular Bootstrap: format identifier not being utilized

Check out this Plunk for reference. This is how my controller is set up: app.controller("myController", [ "$scope", function($scope){ $scope.DateFormat = "DD/MM/YYYY"; $scope.From = '15/01/2015'; // DD/MM/YYYY ...

javascripthtmlcssangularjstwitter-bootstrap

Personalized Design Incorporating Sections and Sidebars

I need the aside to be positioned on the right side and the section on the left side, both centered in the space. Feel free to check out this link <!DOCTYPE html> <html> <head> <style> #main { width: 800px; margin: 0 auto; } ...

javascripthtmlcsstwitter-bootstrapvisual-studio-2013

Error: Attempting to assign a value to the property 'running' of an undefined variable

While working with Nuxt.js, I encountered an issue related to reading the running property of my client object. Here is the HTML code snippet: <b-button v-show="!(projectSelecter(project.ID)).isStarted" //this work just fine variant="success" c ...

javascripthtmltwitter-bootstrapvue.jsnuxt.js

How can you include a key event handler that specifically looks out for the Space key being pressed?

When a user presses the Enter key (and button is in focus), the button opens. However, I would like to also open the link button when the user presses the space bar. Buttons should be activated using the Space key, while links should be activated with the ...

javascripthtml

Obtaining the source code from a different domain website with the help of jQuery

Is there a way to extract part of the source code from a YouTube page without using server-side programming? I've tried cross-domain AJAX techniques like Yahoo YQL and JsonP. While Yahoo YQL allows me to grab part of the source code, I'm facing ...

javascriptjqueryhtmlajaxcross-domain

The process of toggling a div to slide up and down explained

I'm attempting to create a slide toggle effect on a hidden DIV when a user hovers over specific link buttons. JavaScript: $(function () { // DOM ready shorthand var $content = $(".sliderText"); var $contentdiv = $(".sliderCo ...

jqueryhtmlcss