Select input button css

🔥🔥 how to style select input in css

Hello, glad you are here. I am kunaal and today we will see how to make a custom select input, a custom options input. You can see demo below.

Demo

Video Tutorial —

If you find this article hard or for better explanation. You can watch video tutorial.

Let’s code

 class="container">  class="select" name="select" value="options">options  class="options">  class="item active">option 1  class="item">option 2  class="item">option 3  class="item">option 4   

* margin: 0; padding: 0; box-sizing: border-box; > *:focus outline: none; > body width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; background: #ff6767; font-family: 'roboto', sans-serif; > .container position: relative; > .select position: relative; width: 200px; height: 40px; border-radius: 10px; border: none; text-transform: capitalize; color: #fff; background: #292929; text-align: left; padding: 0 15px; font-size: 16px; cursor: pointer; > .select::after content: ''; position: absolute; right: 20px; top: 50%; transform: translateY(-50%) rotate(45deg); width: 6px; height: 6px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; > .select:hover background: #222222; > .select.active background: #222222; border-bottom-left-radius: 0; border-bottom-right-radius: 0; > .options position: absolute; top: 40px; left: 0; width: 100%; height: fit-content; background: rgba(0, 0, 0, 0.5); border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; overflow: hidden; display: none; > .options.active display: block; > .options .item color: #fff; text-transform: capitalize; width: 100%; height: 30px; padding: 0 15px; line-height: 30px; cursor: pointer; > .options .item.active background: #292929; > 

const select = document.querySelector('.select'); const optionBox = document.querySelector('.options'); const options = [. document.querySelectorAll('.options .item')]; let activeOption = 0; // default should be 0 window.onclick = (e) =>  if(!e.target.className.includes('select')) select.classList.remove('active'); optionBox.classList.remove('active'); > else select.classList.toggle('active'); optionBox.classList.toggle('active'); > > options.forEach((item, i) =>  item.onmousemove = () =>  hoverOptions(i); > >) const hoverOptions = (i) =>  options[activeOption].classList.remove('active'); options[i].classList.add('active'); activeOption = i; setValue(); > window.onkeydown = (e) =>  if(select.className.includes('active')) e.preventDefault(); if(e.key === 'ArrowDown' && activeOption  options.length - 1) hoverOptions(activeOption + 1); > else if(e.key === 'ArrowUp' && activeOption > 0) hoverOptions(activeOption - 1); > else if(e.key === 'Enter') select.classList.remove('active'); optionBox.classList.remove('active'); > > > const setValue = () =>  select.innerHTML = select.value = options[activeOption].innerHTML; > setValue(); 

I hope you understood everything. If you have any doubt or you find any mistake that I made or you have any suggestion feel free to ask me in comment.

If you are interested in programming and want to know how I a 15yr old teen do coding make these design. You can follow me on my Instagram. I am also planning to post my game development stuff on Instagram.

Источник

Select Form Buttons in CSS – Techniques with Examples

This article covers two ways, the easy and the advanced way to select a button or buttons in a form with CSS. We give example HTML and CSS for each technique to select a form button or form buttons. The advanced way uses a CSS attribute selector.

The Easy Way to Select a Form Button in CSS

The simplest way to select a form button is by id. Consider the following HTML, a form with a “Date” text field, and button labelled “Check”:

The easy way to select the “Check” form button in CSS is using the “#id” CSS selector syntax. The button is selected in CSS using the unique id “ check-button ” we gave it in the HTML:

Advanced: Using a CSS Attribute Selector to Select Form Buttons in CSS

While using an id on the button is easy, using lots of ids can make HTML markup for more complex pages with many elements dense and harder to read.

A cleaner, more elegant way to specify the button is to use a CSS attribute selector:

The attribute selector here is [type=»button»] . This selector as a whole says “for all forms, select the input elements whose type attribute is button“. In other words, select all the form buttons in the page.

Using a CSS attribute selector, the id on the form button isn’t needed, so id=»check-button» can be dropped from HTML markup above. Here’s the simpler HTML:

Submit buttons will not be selected by this method. If you want to selected a submit button, see our coming article.

Select a Particular Form Button with CSS Attribute Selectors

To select a particular buttons, the button can be specified by its label text. Here we have a form with two buttons, “Check” and “Download”:

To just select the button labelled “Check”, use a selector with [value=»Check»] :

form#check-form input[type=»button»][value=»Check»]

Submit buttons will not be selected by this method. If you want to selected a submit button, see our coming article.

Select All Form Buttons in a Particular Form with a CSS Attribute Selector

To select the buttons in a particular form, one way is to put an id on the form:

After adding an id to the form, add the form’s id to the CSS selector using ‘#’, like this:

form#check-form input[type=»button»]

This selector specifies all the buttons in the “check-form” form. Submit buttons will not be selected. If you want to selected a submit button, see our next article.

Which Browsers Support CSS Attribute Selectors?

Attribute selectors are supported by standards based browsers.

I’ve tested these techniques in Firefox 4 (FF4, 4.0, 4.0.1), Chrome 11 (11.0), Safari 5 (5.0.5) and Opera 11 (11.10).

With Opera there’s a caveat: one attribute selector worked input[value=»Check»] , but two input[type=»button»][value=»Check»] did not. I didn’t investigate Opera further.

Internet Explorer 6 (IE6) does not support attribute selectors.

Attribute selectors are supported by Internet Explorer 7 (IE7) and Internet Explorer 8 (IE8) only if the !DOCTYPE has been specified at the top of the webpage. Attribute selectors should work fine in IE9; I haven’t tested if a DOCTYPE is required.

I have tested these techniques on Safari on the iPhone, iPad and iPod running iOS 4.3 (4.3.2). They work great!

References

You can read more about CSS attribute selectors at W3C or w3schools.

Questions?

Did you want to select form buttons in a way that wasn’t covered here? If so, write a comment below, and I’ll do my best to answer your query.

Источник

How to Select Input By Type and Name Using CSS

In this tutorial, learn how to select input by type and name in CSS. The short answer is to use the selector input[type=»name»] where name should change with the input type as given here.

Let’s find out how to select input by type with the examples given below.

Select Input type = «text» in CSS

To select the input type text in CSS, you have to use the selector input[type=»text»] followed by the CSS properties defined inside the curly brackets <> .

The above example shows that the border and the color of the change to the specified values. You can apply as many CSS of your choice as per your requirements.

Get Button Element with type = «button» to Add CSS

To select the button type input in CSS, you have to use the selector input[type=»button»] . It can be useful to add any type of CSS to the button elements.

The above example adds background and color to the button element using CSS. However, you can also apply the other CSS properties to apply other effects that can attract your users to click the button.

Select Input type = «checkbox» in CSS

You have to use the selector input[type=»checkbox»] and add the CSS properties as specified in the example below.

We cannot apply background, color, border, and other CSS properties to checkboxes that can change the appearance of other input elements. But, you can apply CSS like the cursor to the checkbox element.

You can mouse hover over the above checkbox elements to see how the cursor changes to a pointer. The mouse pointer changes to a hand that points to the checkboxes.

Select Input type = «email» in CSS

To apply CSS to the input type email element, you have to use the selector input[type=»email»] followed by the curly brackets <> . Inside the curly brackets, you add as many CSS as you want to change the appearance of the element.

The above example contains the input type email element with applied border and color CSS. The border CSS property applies a border to the input element and color applies a color to the text content of the input element.

Get Input type = «radio» in CSS

You have to use the selector input[type=»radio»] to specify the CSS properties to the input type radio elements.

However, the CSS works the same as the checkboxes as you cannot apply background, color, border, and other CSS properties to the radio input element. You have to wrap them inside the div element and apply CSS to the div element to change the appearance of input type radio elements. But, it is possible to apply CSS like the cursor to the radio element.

Источник