I want to remove the white edges and the black shadow from my text box in the page of https://help.penny.co/portal/en/home:
Here's what I tried:
.SearchBox__searchpart{
background-color:transparent;
box-shadow: none !important;
-webkit-box-shadow: none !important;
}
This is the input text CSS:
.SearchBox__searchpart input {
background-color: transparent;
border: 1px solid #818a91;
vertical-align: middle;
border-radius: 24px;
}
The shadow that you see is applied to #searchContainer, try this in your stylesheet:
#searchContainer {
box-shadow: none;
}
The problem is you're targeting the wrong element. The element with box shadow in the website you posted is the element with the class Header__searchLink. If you set box-shadow: none; on that element, you'll achieve nirvana.
Look at the parent of the input element and and a css box-shadow: none; there.
Next time you ask, please add more details so that you can find answers easily.
Related
How can i disable this:
I was working with this half hour. Can't find who places these borders. Button is transparent. I've tried doing:
input[type="submit"]:active,
input[type="submit"]:focus {
-moz-outline-style: none!important;
outline:none!important;
outline:0!important;
}
Still nothing..
To me it looks like a shadow to remove a shadow you can do:
webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
and in case it's a border just try
border: 0px;
I am designing a custom arrow (using background image) for a group of select boxes.
Problem is that each select box should be very short in width and therefore if the text is longer than this width it appears over the background arrow.
I need to find a way to display the background image over the text.
The other problem is that there are about 500 such select boxes and I do not wish to add a span layer in the HTML code for each of those boxes to accomplish the goal.
Therefore I am looking for a CSS solution only. JS would not work either.
Here is the CSS:
.dropdown{
width:57px;
border: 1px solid #cfcfcf;
height: auto;
border-radius: 5px;
padding:3px 4px 4px;
position: relative;
z-index: 0;
overflow:hidden;
}
.dropdown select{
border: none;
background-color: transparent;
outline: none;
padding: 1px 0 0 5px;
width:145%;
background: url(http://i57.tinypic.com/nnmgpy_th.png) no-repeat right;
background-position: 55%;
}
JSFiddle here:
http://jsfiddle.net/pazzesco/r6c9zcpc/
Any comments or ideas will be greatly appreciated.
Have you considered just increasing the right padding on your .dropdown selector to say 10px?
padding:3px 10px 4px; should make sure your text never overlaps over the arrow.
Or do you actually want the text to display behind the arrow (which won't work as you've got the arrow as a background image)? :)
I hope I haven't misunderstood the question!
Cheers
Ines
Just increase padding-right values by 30px.
.dropdown select{ padding: 1px 30px 0 5px; }
Result: This will clip the text; 30px from right side.
JSFiddle Here: [http://jsfiddle.net/nvishnu/Lq7hosrd/2/]
Here is the design for the tabs
I need each tab to be the same width. The top green border on active tab should be over the left and right borders.
Here is the code I've written so far: http://jsbin.com/ricuzubo/1/edit
Can anyone help me?
Instead of applying border-right: none; to your anchor tag, remove that style and add margin-right: -10px to it. This will do the trick.
SEE THE DEMO and THE CODE for reference.
li a {
border: 10px solid #ccc;
margin-right: -10px;
}
li.active a {
box-shadow: 0px -10px 0px green;
}
If you can use CSS3 remove your border and add this effect using box-shadow.
Like This:
li.active a
{
box-shadow: 0px -10px 0px green;
}
Here is a FSfiddle: http://jsfiddle.net/NicoO/BcA6K/
I've solved your problem here using some jQuery and CSS.
Good Luck!
I'm hoping somebody can help me answer this, as hours of Googling is not proving fruitful. I currently have this code styling my form labels:
label {
display:inline-block;
height: 15px;
width: 350px;
float: left;
padding: 5px;
border-top: 1px solid black;
color: black;
font-size: 12px;
}
I would like to style the same border-top property to my input, textarea and select tags. However, styling border-top on these elements styles the obvious, the border around the element itself. I would like to know if its possible to display the border outside, or if I need to use other properties to achieve my desired result.
If you mean that the borders look inset than you need simply
input {
border: 0;
border-top: 1px solid #333;
}
And if you literally means OUTSIDE so you can use something like shadow to spoof
Demo
CSS
input {
box-shadow: 0px -1px 1px -1px #333;
border: none;
margin: 50px;
}
If you want to have a border outside the elements, you will need a block element around each of the input, textarea or select (probably div if no element is semantically relevant). These blocks will receive the border and you can adjust the distance between the form elements and the border with padding-top on the div
This also has the advantage that border on div is way better supported than border on form elements.
This question already has answers here:
How to remove focus border (outline) around text/input boxes? (Chrome) [duplicate]
(11 answers)
Closed 7 years ago.
I have seen that chrome puts a thicker border on :focus but it kind of looks off in my case where I've used border-radius also. Is there anyway to remove that?
You should be able to remove it using
outline: none;
but keep in mind this is potentially bad for usability: It will be hard to tell whether an element is focused, which can suck when you walk through all a form's elements using the Tab key - you should reflect somehow when an element is focused.
I had to do all of the following to completely remove it:
outline-style: none;
box-shadow: none;
border-color: transparent;
Example:
button {
border-radius: 20px;
padding: 20px;
}
.no-focusborder:focus {
outline-style: none;
box-shadow: none;
border-color: transparent;
background-color: black;
color: white;
}
<p>Click in the white space, then press the "Tab" key.</p>
<button>Button 1 (unchanged)</button>
<button class="no-focusborder">Button 2 (no focus border, custom focus indicator to show focus is present but the unwanted highlight is gone)</button>
<br/><br/><br/><br/><br/><br/>
To remove the default focus, use the following in your default .css file :
:focus {outline:none;}
You can then control the focus border color either individually by element, or in the default .css:
:focus {outline:none;border:1px solid red}
Obviously replace red with your chosen hex code.
You could also leave the border untouched and control the background color (or image) to highlight the field:
:focus {outline:none;background-color:red}
:-)
This will definitely work. Orange outline won't show up anymore..
Common for all tags:
*:focus {
outline: none;
}
Specific to some tag, ex: input tag
input:focus{
outline:none;
}
border:0;
outline:none;
box-shadow:none;
This should do the trick.
The simpliest way is to use something like this but note that it may not be that good.
input {
outline: none;
}
I hope you find this useful.
you could just set outline: none; and border to a different color on focus.
Problem is when you already have an outline. Chrome still changes something and it's a real pain. I cannot find what to change :
.search input {
outline: .5em solid black;
width:41%;
background-color:white;
border:none;
font-size:1.4em;
padding: 0 0.5em 0 0.5em;
border-radius:3px;
margin:0;
height:2em;
}
.search input:focus, .search input:hover {
outline: .5em solid black !important;
box-shadow:none;
border-color:transparent;;
}
.search button {
border:none;
outline: .5em solid black;
color:white;
font-size:1.4em;
padding: 0 0.9em 0 0.9em;
border-radius: 3px;
margin:0;
height:2em;
background: -webkit-gradient(linear, left top, left bottom, from(#4EB4F8), to(#4198DE));
background: -webkit-linear-gradient(#4EB4F8, #4198DE);
background: -moz-linear-gradient(top, #4EB4F8, #4198DE);
background: -ms-linear-gradient(#4EB4F8, #4198DE);
background: -o-linear-gradient(#4EB4F8, #4198DE);
background: linear-gradient(#4EB4F8, #4198DE);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4EB4F8', endColorstr='#4198DE');
zoom: 1;
}