Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to remove input background on select in CSS
The default styling for HTML form elements can often be somewhat dull and uninspiring. One element that is often in need of a design overhaul is the select input, which is used to present users with a list of options to choose from. In this article, we will show you how to remove the default background of the select input using CSS.
By doing so, you will be able to customize the appearance of your select inputs and make them more visually appealing and in line with the overall design of your website or application.
Various Inputs fields in CSS
Let us first understand the basic knowledge that, we need to have before moving on to solving this problem. The first thing we need to know is, what are inputs in a web page? Any intractable section of the website through which the user can enter and submit data is called input field in a website.
There are different types of inputs that are provided in HTML. For example, text area, radio, select options, etc. Each of these inputs are styled differently by default. On many occasions we are required to use a custom styling to give impact to our website and make it stand out from others.
Some common examples for input fields being used in websites are given below.
<form action="someAction"> <label for="YourName">Your First name:</label> <input type="text" id="YourName" name="YourName"><br><br> <label for="YourLastName">Your Last name:</label> <input type="text" id="YourLastName" name="YourLastName"><br><br> <input type="submit" value="Submit"> </form>
The second thing we need to know is about “states” of these inputs. Whenever we are interacting with the input field to enter some data, the input field is said to be in “active” state, but if the input field is left untouched, it is said to be in “non-active” state. Another terminology that can be used to describe them is “focused” and “unfocused” state. By default, all inputs are in unfocused state.
Removing Background Now we can begin our approach to solve this problem. CSS provides us various “pseudo-classes” to target different or special states of some input field. One such class is focus pseudo-class. It is applied on the element that came into “focus” on the website, meaning the user interacted with that element either by using the keyboard or by clicking the element by mouse. We will make use of this pseudo-class, so as to remove the input background on focused state. For that we will change the default styling to the one that helps in achieving our goal.
But that only works for input types that are entered by the user. More often than not, websites contain drop-down lists that has some pre-existing list of options you can chose from and the user choses one or more from the given list.
As all other form of inputs, it is also an input field and has a default styling associated to it. We can create the custom drop-down list using the select tag from html. It is majorly used in forms to collect data from the users. An example of a drop-down list using the select tag is given below.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Select Without background</title>
</head>
<body>
<form id="contactForm" method="POST" action="">
<label for="movies">Which movie would you like to see?</label>
<select name="movies" id="movies">
<option value="a">Movie A</option>
<option value="b">Movie B</option>
<option value="c">Movie C</option>
<option value="d">Movie D</option>
</select>
<br />
</form>
</body>
</html>
In the above example, we provided the select tag a name and an id. The name attribute is for refer it after its submission by user, while the id attribute is used to access the data that will be sent after submission. To provide the options that are available for the user to choose we use the option tag. We can also use several other attributes to make the list more accessible and distinct.
Example
In the following example we can use the –webkit-appearance : none to completely remove the background.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Select Without background</title>
<style>
.form-control:focus,
.form-control:active {
background: transparent;
}
#movies,
#movies:focus,
#movies:active {
background: none;
-webkit-appearance: none;
}
</style>
</head>
<body>
<form id="contactForm" method="POST" action="">
<input
name="YourName"
type="text"
class="someClass"
placeholder="Can you please tell me your name :)"
required
/>
<br />
<input
name="YourEmail"
type="email"
class="someClass"
placeholder="Your email please :)"
/>
<br />
<label for="movies">Which movie would you like to see?</label>
<select name="movies" id="movies">
<option value="a">Movie A</option>
<option value="b">Movie B</option>
<option value="c">Movie C</option>
<option value="d">Movie D</option>
</select>
<br />
</form>
</body>
</html>
As we can already notice that the visual output of the example above is different and does not have that default grayish toned background color in it. Another unintuitive approach would be to use a div as a container for the select box. After that set a width restriction and hide the overflow, and let the select box’s width be somewhat smaller than the container div. That way the default styled arrow will disappear from the webpage.
Please note that instead of targeting a single tag like we did in this article, most developers make use of ids and classes to make a general style so that we do not have to repeat the code in case a similar situation occurs.
Conclusion
This article discussed the solution for the problem of removing input background in CSS. In the process of doing so, we learnt about inputs, their types, default styling of inputs, and their states. We also learnt how we can target special states of elements using the pseudo class selectors.
4K+ Views
