Unique styling for underlines in pop-up with custom CSS

When exploring my codesandbox project, I encountered 2 questions:

  1. How can I create a custom underline CSS similar to the UI image below the file name and trash icon? I tried using text-decoration:none, but it doesn't match the UI.
  2. How do I center a URL background and display only the text 'Add Image' on an input button like in the UI design? I attempted using background-image with a URL and applied display:none to the input field, but it didn't yield the desired result in the codesandbox.

Just a quick note: For convenience, all the code is available in the codesandbox. If you wish to test the code, please click on "Open In New Window" below the "sign in" button in the codesandbox menu.

https://i.sstatic.net/KmYeb.png

htmlcssvuetify.js

Answer №1

To achieve the desired outcome resembling the UI image provided, include the following CSS:

  .upload-box{
    background-image: url(ADD_IMAGE_URL);
    background-position: center;
    background-size: contain;
}


 .upload-box input{
  width: 100%;
  height: 100%;
  visibility: hidden;

}

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

Is it possible to gradually open or close a div element?

Looking for a way to add an effect to the code below that opens/closes a div on mouseover above an image. Any examples or suggestions? I'm not exactly a javascript expert. HTML: <div> <div class="under"><img src="http://oi60.tinypic.c ...

javascriptjqueryhtmlcss

Guide on linking navigation to various buttons on the Angular menu

I am looking to enhance the functionality of my left menu buttons by adding a navigation path to each one (excluding the main menu). The menu items' names are received as @Input. I have set up a dictionary mapping all the items' names to their r ...

javascripthtmlangulartypescriptmenu

Selection of multiple listings

Looking for a solution to create a multi list selection area? You can double click on an item in the left list to add it to the selected area. Also, you can double click on an item in the selected area to remove it from the list. <ul id="selection"> ...

jqueryhtml

My live website is plagued by an annoying horizontal scroll bar that doesn't appear in the local host version

I am struggling to remove the unwanted horizontal scroll bar on my live website, although it is not visible on my local host... <-- this is my website, built using Vite + ReactJs. I attempted to use overflow: hidden; and max-width: 100% on the body t ...

cssreactjswebweb-deploymentvite

Struggling to retrieve information from session storage to pass along to a PHP class

Is there a way to fetch the email of the currently logged-in user from sessionStorage and send it to a PHP file? I have tried implementing this, but it seems to be not functioning properly. Could you assist me in resolving this issue? <?php $mongoCl ...

javascriptphphtmlajaxgetelementbyid

Is there a way to center li elements evenly on mobile devices, regardless of the text length?

Take a look at these two images showcasing my website on different devices: Mobile: https://i.sstatic.net/spsYj.png Desktop: https://i.sstatic.net/AvFiN.png I have organized the content using simple ul and li tags. How can I adjust the layout so that ea ...

csstwitter-bootstrap

In order to comply with JSX syntax rules in Gatsby.js, it is necessary to enclose adjacent elements

I want to apologize beforehand for the code quality. Every time I attempt to insert my HTML code into the Gatsby.js project on the index.js page, I encounter this error: ERROR in ./src/components/section3.js Module build failed (from ./node_modules/gatsb ...

javascripthtmlreactjsgatsby

Issue with Jquery's .html() function not functioning properly when trying to select HTML

I am currently working on a piece of code that looks like this: $price = $(element) > $('.main_paket_price').attr('name'); alert($price); Basically, I am trying to select an element inside element which has the class main_paket_pri ...

javascriptphpjqueryhtmlcss

Issues with Vue-select dropdown functionality are causing inefficiencies

I am utilizing vue-select to generate a standard drop-down menu. However, it comes with a search bar by default that I do not need and prefer to keep it simple. I attempted to hide the search bar by using "display: none" which made it disappear. This is t ...

htmlvue.js

The class in my CSS is currently impacting all the menu bar items, but I specifically want it to only affect my photo gallery

<div class="gallery"> <a tabindex="1"><img src="images/smile.jpg"></a> <a tabindex="1"><img src="images/smile.jpg"></a> <a tabindex="1"><img src="images/smile.jpg"></a> ...

htmlcss

Initial page load experiencing issues with paroller.js functionality

Upon hard refreshing the page in the middle section, there seems to be an issue with the paroller js transform: translateY(); CSS effect not functioning properly on the <div class="col col-6" data-paroller-factor="0.4" data-paroller-type="foreground" da ...

javascriptjqueryhtmlcss

When a new element is dynamically added to a table cell, how is the computation of "width: 100%" handled?

When utilizing Backgrid for editing values in a table, an <input type="text"> is inserted inside the <td>. Despite setting the input to max-width: 100%, it can still cause the column to expand beyond desired dimensions. To see this behavior in ...

cssbackgrid

Font sizes may vary depending on whether the site is accessed with or without the "www" prefix

There is an odd occurrence on my website where the font size seems to change when viewing both the www version and non-www version. While setting up a 301 redirect is a common solution, I am intrigued by why this discrepancy exists as it is not something ...

htmlcss

The alignment of the Nivo Slider is off-center

Visit to see that the Nivo Slider is not properly centered on the background. I am unsure why this is happening. (Please disregard the 2nd and 3rd pictures as they are not the correct size, but focus on the 1st one). ...

jqueryhtmlcsspluginsnivo-slider

Arrange the array in chronological order based on the month and year

I'm looking for assistance with sorting an array by month and year to display on a chart in the correct order. Array1: ['Mar19','Apr18','Jun18','Jul18','May18','Jan19'....]; Desired Output: ...

javascripthtmlarrayssorting

Tips for implementing `overflow-x: hidden` on a `ValueContainer` when using `isMulti` in react-select V2

I'm currently grappling with finding a solution to have a react-select V2 component, configured as isMulti, hide selected values that exceed the width of the ValueContainer rather than breaking to a new line and expanding the component's height. ...

cssreactjsreact-select

Deactivate a few CSS guidelines

For my project, I am incorporating interfaces within other interfaces and have been facing conflicts between bootstrap rules and other CSS files. To address this, I encapsulated all Bootstrap rules within a .use_bootstrap class. Now, within my interfaces ...

htmlcsstwitter-bootstrapcss-selectors

Upgrade your input button style using jQuery to swap background images

I have an input button with an initial background image. When a certain condition changes, I want to update its image using jQuery without overriding the button's global CSS in the stylesheet. Is there a way to only change the background attribute wit ...

javascriptjqueryhtmlcss

Properly nested anchor elements with semantic meaning

I'm currently working on a web application where we are implementing inline editing. To illustrate the issue I'm trying to address, let's use the example of a Facebook post. For instance: Jennifer Lopez shared a new video The name "Jennif ...

htmlanchor

Utilizing HTML5 Drag and Drop feature to track the initial position of the element being dragged

Currently, I am utilizing the HTML 5 Drag and Drop API to create a sortable list with auto scroll functionality. One crucial aspect I am trying to incorporate is the ability to detect which specific part of an element was grabbed by the user. Take a look ...

javascripthtmldrag-and-drophtml5-draggable