<select> Tag: The <select> component is used to make a drop-down list. The <select> component is most frequently used in a form, to gather user input. The name attribute is required to reference the form data after the form is submitted (in case you exclude the name attribute, no data from the drop-down list will be submitted). The id attribute is required to relate the drop-down list with a name. The <option> tag inside the <select> component characterize the accessible choices within the drop-down list.
Syntax:
<select> <option>Option1</option> <option>Option2</option> . . . <option>Option n</option> </select>
Attributes:
- autofocus: Indicates that the drop-down list ought to consequently get focus when the page loads. (value: autofocus)
- disabled: Indicates that a drop-down list ought to be disabled. (value: disabled)
- form: Characterizes which form the drop-down list has a place to. (value: form_id)
- multiple: Indicates that multiple options can be chosen at once. (value: multiple)
- name: Characterizes a name for the drop-down list. (value: name)
- required: Indicates that the user is required to choose a value some time recently submitting the form. (value: required)
- size: Characterizes the number of visible options in a drop-down list. (value: number)
We can remove border radius from Select tag by two methods as follows:
Method 1: Using CSS: Use some CSS property to remove the border radius.
Example:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title > Remove border radius from Select tag in css </ title > < style type = "text/css" > /* To remove border radius */ select { height: 20px; -webkit-border-radius: 0; border: 0; outline: 1px solid #ccc; outline-offset: -1px; } </ style > </ head > < body > < center > < h3 style = "color: green" >< br /> GeeksforGeeks </ h3 >< br /> < select > < option >Option1</ option > < option >Option2</ option > < option >Option3</ option > < option >Option4</ option > < option >Option5</ option > </ select > </ center > </ body > </ html > |
Output:
Method 2: Using Bootstrap: The user-agent stylesheet for Chrome gives a border-radius of 5px to all the corners of a <select> component. Custom select menus require as it were a custom class, .custom-select to trigger the custom styles. Custom styles are restricted to the select’s starting appearance and cannot alter the option’s due to browser restrictions.
Example:
HTML
<!DOCTYPE html> < html lang = "en" > < head > <!-- Required meta tags --> < meta charset = "utf-8" > < meta name = "viewport" content= " width = device -width, initial-scale = 1 , shrink-to-fit = no "> <!-- Bootstrap CSS --> < link rel = "stylesheet" href = integrity = "sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin = "anonymous" > crossorigin = "anonymous" > </ script > <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> integrity = "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin = "anonymous" > </ script > < script src = integrity = "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin = "anonymous" > </ script > < script src = integrity = "sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin = "anonymous" > </ script > < title > Remove border radius from Select tag in bootstrap </ title > < style type = "text/css" > /* For default browser setting */ select:not([multiple]) { -webkit-appearance: none; -moz-appearance: none; padding: .5em; padding-right: 1.5em } /* To remove default border radius */ #mySelect { border-radius: 0 } /* Optional styling */ option { font-size: 1.1rem !important; font-weight: bold; text-transform: uppercase !important; color: #013208 !important; } </ style > </ head > < body > < center > < br /> < h3 style = "color: green" >< br /> GeeksforGeeks </ h3 >< br /> < select id = "mySelect" class = "custom-select" style="width:150px; background-color: lightgreen; font-weight:bold;color:#013208;"> < option value = "1" >G</ option > < option value = "2" >E</ option > < option value = "3" >E</ option > < option value = "4" >K</ option > < option value = "5" >S</ option > < option value = "6" >F</ option > < option value = "7" >O</ option > < option value = "8" >R</ option > < option value = "9" >G</ option > < option value = "10" >E</ option > < option value = "11" >E</ option > < option value = "12" >K</ option > < option value = "13" >S</ option > </ select > </ center > </ body > </ html > |
Output:
We can use select tag and .custom-select class with form-control as follows
Example:
HTML
<!DOCTYPE html> < html lang = "en" > < head > <!-- Required meta tags --> < meta charset = "utf-8" > < meta name = "viewport" content= " width = device -width, initial-scale = 1 , shrink-to-fit = no "> <!-- Bootstrap CSS --> < link rel = "stylesheet" href = integrity = "sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin = "anonymous" > crossorigin = "anonymous" > </ script > <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> integrity = "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin = "anonymous" > </ script > < script src = integrity = "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin = "anonymous" > </ script > < script src = integrity = "sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin = "anonymous" > </ script > < title > Remove border radius from Select tag in bootstrap </ title > < style type = "text/css" > /* For default browser setting */ select:not([multiple]) { -webkit-appearance: none; -moz-appearance: none; padding: .5em; padding-right: 1.5em } /* To remove default border radius */ #mySelect { border-radius: 0 } </ style > </ head > < body > < center > < br /> < h3 style = "color: green" >< br /> GeeksforGeeks </ h3 >< br /> < form > < div class = "form-group" > < label for = "mySelect" >Email address</ label > < input type = "email" class = "form-control" id = "mySelect" style = "width:350px;" placeholder = "name@example.com" > </ div > < div class = "form-group" > < label for = "mySelect" > Select options </ label >< br /> < select class = "form-control custom-select" style = "width:150px;" id = "mySelect" > < option >Option 1</ option > < option >Option 2</ option > < option >Option 3</ option > < option >Option 4</ option > < option >Option 5</ option > </ select > </ div > </ form > </ center > </ body > </ html > |
Output: