Having trouble with the CSS content Property in Firefox?

My current project involves implementing a feature where a close button (in the form of an 'x' character) appears in the search box after a user enters a search term, allowing them to clear the contents easily.

This functionality is working smoothly in Chrome and IE, however, it seems to be experiencing issues in Firefox.

Any assistance or insights on resolving this issue would be greatly appreciated.

.search-box,.close-icon,.search-wrapper {
position: relative;
padding: 10px;
}
.search-wrapper {
width: 500px;
margin: auto;
margin-top: 50px;
}

.search-box:focus {
box-shadow: 0 0 15px 5px #b0e0ee;
border: 2px solid #bebede;
}
.close-icon {
border:1px solid transparent;
background-color: transparent;
display: inline-block;
vertical-align: middle;
  outline: 0;
  cursor: pointer;
}
.close-icon:after {
content: "X";
display: block;
width: 15px;
height: 15px;
position: absolute;

z-index:1;
right: 35px;
top: 0;
bottom: 0;
margin: auto;
padding: 2px;
border-radius: 50%;
text-align: center;
color: black;
font-weight: normal;
font-size: 12px;

cursor: pointer;
}
.search-box:not(:valid) ~ .close-icon {
display: none;
}
<div class="search-wrapper">
<form>
<input type="text" name="focus" required class="search-box" placeholder="Enter search term" />
<button class="close-icon" type="reset"></button>
</form>
</div>

htmlcss

Answer №1

If you're looking for some coding assistance, this snippet should do the trick.

.search-box,.search-wrapper {
position: relative;
padding: 10px;
}
.search-wrapper {
width: 500px;
margin: auto;
margin-top: 50px;
}
.search-box
{
  width:300px;
}
.search-box:focus {
box-shadow: 0 0 15px 5px #b0e0ee;
border: 2px solid #bebede;
}
.close-icon {
border:1px solid transparent;
background-color: transparent,
display: inline-block;
vertical-align: middle;
  outline: 0;
  position: absolute;
  top:19px;
  left:305px;
z-index:1;
padding: 1px 2px;
border-radius: 50%;
text-align: center;
color: black;
font-weight: normal;
font-size: 12px;

cursor: pointer;
}

.search-box:not(:valid) ~ .close-icon {
display: none;
}
<div class="search-wrapper">
<form>
<input type="text" name="focus" required class="search-box" placeholder="Enter search term" />
<button class="close-icon" type="reset">X</button>
</form>
</div>

Remember : adjust your .search-box width and coordinate with the left of your .close-icon

Answer №2

Give this code a try: Hopefully, it resolves your issue. Make sure to adjust the "outer_box" class for width as needed.

<style> 
.search-box, .search-wrapper { 
    padding: 10px;
    box-sizing: border-box; 
 }

.search-box {
    position:relative;
    width:100%;
}

.outer_boxs{
    position:relative;
    width:60%;
}  

.search-wrapper {
    width: 500px;
    margin: auto;
    margin-top: 50px;
}

.search-box:focus {
    box-shadow: 0 0 15px 5px #b0e0ee;
    border: 2px solid #bebede;
}
.close-icon {
    border:1px solid transparent;
    background-color: transparent,
    display: inline-block;
    vertical-align: middle;
    outline: 0;
    cursor: pointer;
    position: absolute;
    right:5px;
    top: 10px;
    background:#f2f2f2;
}

.search-box:not(:valid) ~ .close-icon {
    display: none;
}
</style>
<div class="search-wrapper">
  <form>
    <div class="outer_boxs" >
      <input type="text" name="focus" required class="search-box" placeholder="Enter search term" />
      <button class="close-icon" type="reset">X</button>
    </div>
  </form>
</div>

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

Having trouble with a jQuery.validationEngine reference error?

Despite everything being correctly referenced, I am facing difficulties in getting it to function properly. It's strange because it worked once, but the validation message took 10 seconds to appear. After that, without making any changes, I tried agai ...

javascriptjqueryhtmljquery-plugins

Using CSS to position a pair of divs containing text and images side by side

Is there a better approach to creating two divs and two pictures without using negative margins, similar to the example shown here? ...

csslayout

Can the underline height be adjusted when a developer uses `text-decoration: underline;` in CSS to generate an underline effect?

Can the height of the underline created using text-decoration: underline; in CSS be adjusted? I used CSS to apply an underline to the word "about" with an 'id' of '#title4' but I want to increase the space between the word and the unde ...

htmlcss

Change the navbar brand in Bootstrap to be hidden on small screens like mobile devices

I am facing an issue with the navbar on my website where it expands in height when viewed on mobile devices due to not fitting into a single line. I have observed that if I remove the brand, it fits perfectly. However, I want to keep the brand visible on l ...

javascripthtmlcssbootstrap-4

How can I implement user-specific changes using Flask?

I am a beginner with Flask and I am working on a project where users can sign up, and if the admin clicks a button next to their name, the user's homepage will change. Below is the Flask code snippet: from flask import Flask, redirect, url_for, render ...

javascriptpythonhtmlcssflask

Upon clicking the 'Add Image' button, TINYMCE dynamically incorporates an input

I am in search of creative solutions to address an issue I'm facing. Currently, I am utilizing TINYMCE to incorporate text into my webpage. However, I would like to enhance this functionality by having a feature that allows me to add an image along w ...

javascriptphpcssajaxtinymce

What are the steps to effectively utilize my search bar alongside Google Custom Search?

Here is the HTML code for my form: <form action="#" class="searh-holder"> <input name="se" id="se" type="text" class="search" placeholder="Search.." value="" /> <button class="search-submit" id="submit_btn"><i class="fa fa-sea ...

javascripthtmlsearchgoogle-searchgoogle-custom-search

Enhancing react-confirm-alert: Steps to incorporate your personalized CSS for customizing default settings

I'm currently utilizing a confirmation popup feature provided by react-confirm-alert: popup = _id => { confirmAlert({ title: "Delete user", message: "Are you sure?", buttons: [ { label: ...

javascriptcssreactjscss-selectors

Modifying the HTML content of a span element does not always initialize all of its properties

I've been working on setting up a comments-reply system for my website. I have all the necessary PHP files in place, but I'm facing an issue with updating the vote counts dynamically. In the image provided, you can see that upon voting once, I a ...

htmlajaxjquerypost

Handling click events for parent and child elements in Angular 5

In Angular5, Below is the code I am working with: <div (click)="abc()"> some content <button (click)="xyz()">Click</button> </div> When I click on the button, both methods are being called. I want only a sin ...

javascripthtmlangularangular5

Does the input password typically submit on its own?

When attempting to create a form, I encountered an unexpected behavior. <form> <input type="text" autocomplete="username" style="display:none;"> <label for="password">password:</label><input type="password" autocomplete="c ...

html

How can I make a DIV occupy the entire vertical space of the page?

I am working on a Google Maps application that takes up the majority of the screen. However, I need to reserve a strip at the top for a menu bar. How can I ensure that the map div fills the remaining vertical space without being pushed past the bottom of ...

csshtml

"Learn how to extract the image URL from the configuration file (config.json) within the assets folder, and then seamlessly display it within

In my Angular project, I have a configuration file located in the assets folder: { "brandConfig": "brand1", "brand1": {"urlPath": "http://192.168.168.60:8081/mantle-services", " ...

javascripthtmlangularhttpfrontend

Steps for adding information to a sub tag within an XML document

Imagine having this example tag <root> <foo> </foo> </root> with the following html form <form action="foo.php method="post"> <input type="text" name="something"> <input type=" ...

phphtmlxml

determining CSS selector

Having trouble identifying a locator using CSS. There are 10 elements with the same locator name on the webpage. Each web element has the same XPath value: //div[@class='thumb_image'] The web element list size is 10. If I want to access the 5t ...

cssselenium

Bring JavaScript Function into Vue's index.html File

Recently in my code files, I noticed the following: function example() { console.log("testing"); } In another file, I have something like this: <head> <script src="../src/example.js" type="text/babel"></sc ...

javascripthtmlvue.js

The modals are all tangled up and now spilling over the edges

The modals in the project seem to have stopped working for some unknown reason. They were functioning properly a few days ago, but now they appear to be broken. The container div is overflowing. Here is a snippet of HTML code I have been using since the ...

htmlbootstrap-4

Incorporating Entrance Animations for Individual Elements within ngView Using AngularJS

Can each content within ngView be animated individually upon entering, rather than the entire View (div) itself? ...

javascripthtmlcssangularjs

Is it possible to use CSS border-radius without any vendor prefixes?

Are there alternative methods to create rounded borders without using the -moz prefix, since this only applies to Mozilla browsers? -moz-border-radius-topleft:3%; -moz-border-radius-topright:3%; -moz-border-radius-bottomright:3%; -moz-border-radius-bott ...

jquerymozillacss

Is there a way to change TextBox multiline to uppercase in Opera browser?

Does anyone know how to convert TextBox multiline to Uppercase in Opera? I tried using "text-transform:uppercase" but it only seems to work with IE ...

htmlcssopera