Css select no border radius

Css how to remove border from select box

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. We can use select tag and .custom-select class with form-control as follows Example: HTMLOutput: Solution: Solution 1: As i guessed, its due to bootstrap styles: it sets a box-shadow for .

How to remove border radius from Select tag using Bootstrap ?

Tag: The component is used to make a drop-down list. The 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 tag inside the component characterize the accessible choices within the drop-down list.

 Option1 Option2 . . . Option n  

• 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.

HTML

Method 2: Using Bootstrap: The user-agent stylesheet for Chrome gives a border-radius of 5px to all the corners of a 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.

HTML

We can use select tag and .custom-select class with form-control as follows

HTML

React select removing the border and box shadow, If you want to remove the border of the entire options list, then you need to set the style on the menu component and not on the option

How to remove focus border outline around text input boxes Easy

Select box : remove borders

Select box : remove borders, 1 Answer 1 · Thanks. · This is the only way to do what you’re asking, you need to remove the browser rendering and style it yourself (add your own

How to remove border highlight on an <select> after press it

As i guessed, its due to bootstrap styles:

.form-control:focus /* => from bootstrap css */ < . outline: 0; box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25); /* =>this cause the highlight! */ > 

it sets a box-shadow for .form-control:focus . you have to override it in your css:

input:focus, select:focus, .form-control:focus, textarea:focus, button:focus < outline: none !important; box-shadow: none !important; >body < padding: 40px 20px 20px 20px; >.qa-collapse < background-color: rgb(245, 245, 245); >.qa-input < border-top-left-radius: 50px; border-bottom-left-radius: 50px; border-right: none !important; border: 1px solid #F2F2F2; width: 82%; padding: .25rem .75rem; font-size: 1rem; line-height: 1.5; color: #495057; background-color: #fff; background-image: none; background-clip: padding-box; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; >.qa-search < border-top-right-radius: 50px; border-bottom-right-radius: 50px; background-color: #E01E34; border: 1px solid #E01E34; padding: .2rem .75rem; >input[type="text"].qa-input::-webkit-input-placeholder < color: ; font-size: 80%; font-family: PosLight; >.qa-search img < margin-top: -3px; >.qa-form-inline < display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-align: center; align-items: center; >.qa-track-trace p < font-family: PosLight; font-size: 12px; padding: 0 2.6rem 0 0.7rem; color: #999999; >.nav-tabs < border: 0px; >.nav-tabs .nav-link.active < border: 0px; border-top-right-radius: 0; border-top-left-radius: 0; background-color: transparent; border-color: transparent; >.nav-tabs .nav-link:hover < border-color: transparent; >.nav-tabs .nav-link < border: 0px; border-top-right-radius: 0px; border-top-left-radius: 0px; background-color: transparent; >.qa-send-lp-tab < color: rgba(0, 0, 0, .5); display: block; padding: 0rem 1rem; >.qa-send-lp-tab:hover < color: rgba(0, 0, 0, .7); >.qa-send-lp-tab.active < color: #E11F34 !important; >.qa-track-trace p < font-family: PosLight; font-size: 12px; padding: 0 2.6rem 0 0.7rem; color: #999999; >.qa-input-full < border-radius: 50px; border: 1px solid #F2F2F2; width: 100%; padding: .25rem .75rem; font-size: 1rem; line-height: 1.5; color: #495057; background-color: #fff; background-image: none; background-clip: padding-box; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; >input[type="text"].qa-input-full::-webkit-input-placeholder < color: ; font-size: 80%; font-family: PosLight; >input[type="text"].qa-input-full::-webkit-input-placeholder < color: ; font-size: 80%; font-family: PosLight; >.qa-dropdown < border-top-right-radius: 50px; border-bottom-right-radius: 50px; background-color: #E01E34; border: 1px solid #E01E34; padding: .20rem .75rem; >.qa-dropdown img < margin-top: -3px; >select.form-control < -webkit-appearance: none; -moz-appearance: none; background: url("data:image/svg+xml;utf8,") #fff; /* background: url(../img/dropdown-2.svg); */ /* background: url(../img/dropdown.svg); */ /*background-position: 91.5% 50%; */ background-position: 95% 50%; background-repeat: no-repeat; >select.form-control:not([size]):not([multiple]) < height: 35px; border: 1px solid #F2F2F2; border-radius: 50px; border: 1px solid #F2F2F2; width: 100%; padding: .25rem .75rem; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; >.styled-select

Just override .form-control:focus with box-shadow: none!important;

.form-control:focus < box-shadow: none!important; >input:focus, select:focus, textarea:focus, button:focus < outline: none !important; >body < padding: 40px 20px 20px 20px; >.qa-collapse < background-color: rgb(245, 245, 245); >.qa-input < border-top-left-radius: 50px; border-bottom-left-radius: 50px; border-right: none !important; border: 1px solid #F2F2F2; width: 82%; padding: .25rem .75rem; font-size: 1rem; line-height: 1.5; color: #495057; background-color: #fff; background-image: none; background-clip: padding-box; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; >.qa-search < border-top-right-radius: 50px; border-bottom-right-radius: 50px; background-color: #E01E34; border: 1px solid #E01E34; padding: .2rem .75rem; >input[type="text"].qa-input::-webkit-input-placeholder < color: ; font-size: 80%; font-family: PosLight; >.qa-search img < margin-top: -3px; >.qa-form-inline < display: -ms-flexbox; display: flex; -ms-flex-flow: row wrap; flex-flow: row wrap; -ms-flex-align: center; align-items: center; >.qa-track-trace p < font-family: PosLight; font-size: 12px; padding: 0 2.6rem 0 0.7rem; color: #999999; >.nav-tabs < border: 0px; >.nav-tabs .nav-link.active < border: 0px; border-top-right-radius: 0; border-top-left-radius: 0; background-color: transparent; border-color: transparent; >.nav-tabs .nav-link:hover < border-color: transparent; >.nav-tabs .nav-link < border: 0px; border-top-right-radius: 0px; border-top-left-radius: 0px; background-color: transparent; >.qa-send-lp-tab < color: rgba(0, 0, 0, .5); display: block; padding: 0rem 1rem; >.qa-send-lp-tab:hover < color: rgba(0, 0, 0, .7); >.qa-send-lp-tab.active < color: #E11F34 !important; >.qa-track-trace p < font-family: PosLight; font-size: 12px; padding: 0 2.6rem 0 0.7rem; color: #999999; >.qa-input-full < border-radius: 50px; border: 1px solid #F2F2F2; width: 100%; padding: .25rem .75rem; font-size: 1rem; line-height: 1.5; color: #495057; background-color: #fff; background-image: none; background-clip: padding-box; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; >input[type="text"].qa-input-full::-webkit-input-placeholder < color: ; font-size: 80%; font-family: PosLight; >input[type="text"].qa-input-full::-webkit-input-placeholder < color: ; font-size: 80%; font-family: PosLight; >.qa-dropdown < border-top-right-radius: 50px; border-bottom-right-radius: 50px; background-color: #E01E34; border: 1px solid #E01E34; padding: .20rem .75rem; >.qa-dropdown img < margin-top: -3px; >select.form-control < -webkit-appearance: none; -moz-appearance: none; background: url("data:image/svg+xml;utf8,") #fff; /* background: url(../img/dropdown-2.svg); */ /* background: url(../img/dropdown.svg); */ /*background-position: 91.5% 50%; */ background-position: 95% 50%; background-repeat: no-repeat; >select.form-control:not([size]):not([multiple]) < height: 35px; border: 1px solid #F2F2F2; border-radius: 50px; border: 1px solid #F2F2F2; width: 100%; padding: .25rem .75rem; line-height: 1.5; color: #495057; background-color: #fff; background-clip: padding-box; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; >.styled-select

And if you want to do this just for select use this:

React-Select Remove focus border, This will ensure the border remains when inactive, hovered or active but there is no blue box shadow. Share.

Источник

CSS — SELECT Element — BORDER-RADIUS — Opera showing border behind select input? As in no curved border?

I am having trouble trying to style a select element in opera. What happens, is that most of the styles applied to this element in the css is shown in Opera (11.60), but for some reason bits also get left out, like the box shadow effect and border radius. It seems to me that opera displays the select element above these styles, as I have noticed in the transitioning that the curved border does exist, it’s just behind the select element. As in, the select element when unfocused appears to have no border radius effect, but when focus is applied to the element, you then see the border in transistion then it disappears behind the element again. In IE 9, Firefox 9 and the latest version of Chrome, the select element in question comes out near uniform. And in all, including Opera, the input element comes out perfectly with the same element styles applied. Here’s the HTML:

  
Biz Name: Biz Category: Choose  Search 
 

input, select < background: #fcfcfc; border: 0px none; font: bold 12px Arial,Helvetica,Sans-serif; color: #6a6f75; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; -moz-box-shadow: , 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; -o-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; -webkit-background-clip: padding-box; -webkit-transition: all 0.7s ease-out 0s; /* Saf3.2+, Chrome */ -moz-transition: all 0.7s ease-out 0s; /* FF4+ */ -ms-transition: all 0.7s ease-out 0s; /* IE10? */ -o-transition: all 0.7s ease-out 0s; /* Opera 10.5+ */ transition: all 0.7s ease-out 0s; >input < padding: 7px 25px; width: 135px; >select < padding: 7px 10px; width: 185px; >input:focus, select:focus < background: #6699cc; color: #e7f3ff; text-shadow: -1px -1px 0 #666, 1px -1px 0 #666, -1px 1px 0 #666, 1px 1px 0 #666; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset; >.bizCategory

I don’t see why Opera should react this manner, as I believe it does support the W3C spec somewhat? In anycase, my assumption is that Opera is applying some sort of default style to this select tag. But that is only an assumption. Would anyone else be able to provide any input in this regard; or would anyone that has experienced this problem before, be able to explain what exactly is going on here? Thank you in advance to taking the time to read through this!

Источник

How to apply rounded borders to highlight/selection

I have used Visual Studio Online for a while for a project, and the way they apply rounded borders to selections in their online code viewer is very interesting: I’ve tried inspecting the element and looking for some kind of custom CSS, but had no luck. I have a feeling this requires some complex «hacks» to make it work, but it seems very interesting as I’ve never seen it done before. How are they able to apply rounded borders to a selection? Note: The normal selection is completely hidden WHILE selecting, and the rounded selection follows your cursor just like a regular selection. Not AFTER you have selected something. Edit: I have created a fork of @Coma’s answer that should work in Firefox and select while the mouse if moving using:

$(document).on('mousemove', function ()  

span.highlight < background: #ADD6FF; >span.begin < border-top-left-radius: 5px; border-bottom-left-radius: 5px; >span.end < border-top-right-radius: 5px; border-bottom-right-radius: 5px; >pre.merge-end > span:last-child < border-bottom-right-radius: 0; >pre.merge-end + pre > span:last-child < border-top-right-radius: 0; >pre.merge-begin > span:first-child < border-bottom-left-radius: 0; >pre.merge-begin + pre > span:first-child

var format = function () < var before = -1; var html = $.trim(editor.text()) .split("\n") .reverse() .map(function (line) < var a = line.length === before ? 'merge-end' : ''; before = line.length; return '
' + line.split('').join('') + '
 
'; >) .reverse() .join(''); editor.html(html); >; 
 
Get the selected nodes and highlight them, take care of their parents
 
var getSelectedNodes = function () < var i; var nodes = []; var selection = rangy.getSelection(); for (i = 0; i < selection.rangeCount; ++i) < selection .getRangeAt(i) .getNodes() .forEach(function (node) < if ($(node).is('span')) < nodes.push(node); >>); > return nodes; >; var highlight = function (nodes, beforeNode) < var currentNode = $(nodes.shift()).addClass('highlight'); var currentParent = currentNode.parent(); if (beforeNode) < var beforeParent = beforeNode.parent(); if (currentParent.get(0) !== beforeParent.get(0)) < currentNode.addClass('begin'); beforeNode.addClass('end'); beforeParent.addClass('merge-begin'); >> else < currentNode.addClass('begin'); >if (nodes.length) < highlight(nodes, currentNode); >else < currentNode.addClass('end'); >>; format(); $(document).on('mouseup', function () < $('.highlight').removeClass('highlight begin end'); highlight(getSelectedNodes()); >); 
 
Is there a disadvantage to using mousemove instead of mouseup ? It seems to make this work perfectly because it applies the selection as soon as you move your mouse, not when you stop selecting.
 
Yes, mousemove it's the right one but I was not sure if working with so many span elements could be expensive to handle so quick. Btw, I'm working on another approach using a canvas, but it won't be ready for today (I have to work).
 
Oh thanks! but @Cyral, I think that using canvas (I'm playing with Paper.js) and mapping the shape (since the heights are known) we can get a much better solution for this. I'll publish it once is ready, busy week!
 
I can assure you this has nothing to do with html, css border radius or highlighting. The proof?
 
 
 
The whole selection appears as a single block with multiple edges and veritices and is not symmetric. There is no way to have multiple edged shape directly in html, without using SVG or Canvas. (well, that's a possibility open for discussion)
 
If it is not a single block, but indeed multiple lines highlighted or marked with some kind of HTML or CSS or JS, then there cant be an outward facing curve like this: 
(there are always possibilities. For example you could cover the selection using a white rectangle with a border-radius, but this appears to be highly inefficient and unlikely. So. )
 
 
Summary, they must be using the Canvas property and whole lot of codes to 'underlay' an interactive selection procedure. There are numerous different types of highlighting appearing in the editor, like 'same word highlighting', 'selected highlighting', 'out of focus highlighting', etc. For all these to happen efficiently, I can't find a better alternative than canvas.
 
Don't be mad at me for posting this. But I didn't want to see my 4 hours of research as a waste. At least I got an observation and that's that.
 
Though I thought covering the selection using a white rectangle with a border-radius at the end, is a rather inefficient and unnecessary way. Microsoft doesn't think so.
 
They are using the curved edged rectangles to cover up the end of highlights to give that effect. They are using absolutely positioned, round-edged s to give the effect of highlighting. And at the end of that , they overlay an image of a rounded rectangle.
 
And kudos to them, they have done a great job with it.
 
Источник