I'm trying to remove the pesky border around a single search box, not all text/input fields.
I believe this to be the culprit -
input[type=text],
input[type=email],
input[type=password],
textarea {
background:none;
border: 1px solid #ddd;
padding:14px 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
To remedy, I've tried (to no avail)-
#searchform #s {
border: none !important;
}
Is there is better (ie - working) way to achieve this effect? I want to keep the border on all other text/input fields, only removing on the single search field..
Live site.
You don't need to use !important in this case. Even more, there's probably no need to use #searchform #s because the #s selector itself has a higher specificity than the input[type=text].
Hence, the following could be sufficient:
#s { border: 0; }
if you have the search input field in some context that other inputs are not in, you could target that.
Example: if its inside a <header> you could do this:
header #searchform #s {
border: none;
}
but mabye show us your html and divs around your input field :)
Related
i was forced to migrate from a theme and want to make the new one look similar. i couldnt find anything on google, so i thought if i ask here perhaps in will help me and others in the future.
for example, a box around all blog posts and widgets on the front page.
i tried this
`{ -moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box; }`
but in all honesty i dont even know what it does. it was just the only answer on google that looked similar - and it didnt do anything to my site.
thanks very much Nico. if anyone has the exact same problem, adding this code into the child theme worked for me:
article {
border: 1px solid #d4d4d4;
}
.widget-container {
border: 1px solid #d4d4d4;
}
Like your tags show, you know, that you are working with CSS there.
This line of css is switching your page elements to border-box (which is a good thing). This will add the padding and border to element's width (http://css-tricks.com/box-sizing/)
If you want to add a border to certain elements, you should know how to identify these elements. You will find class attributes in the HTML of your blog (for example <div class="posting"> ... </div>.
You could know add this css, to add a red border to all divs withclass="posting"
.posting
{
border: 1px solid red;
}
Or if you dare, you could add a border to everything.. But i don't think you really want that
*
{
border: 1px solid red;
}
Here is a funny problem that I encountered.
I am using Asp.net MVC WebGrid in my project. I am trying to apply some CSS to it.
So changed the code to
#grid.GetHtml(footerStyle: "pagination")
Now, the pagination class has some code like this
.pagination a:hover, .pagination a:active{
border: 1px solid #2b66a5;
color: #000;
background-color: #F2F2F2;
}
So now, when I run this file and hover over the page numbers, the panel containing the table starts expanding! One row at a time!
I know I can't manage to get this kind of effect with just CSS if I tried. :p But I am getting it by accident! And it goes away only if I remove both the border and the background-color attributes.
I am just curious to know how is this happening??! Anyone has any idea?
Borders add to the size of some elements. For example, consider you have a div with a height of 800px and a width of 400px. If you add a border of 5px to that div like so:
div.class {
border: 5px solid black;
}
Then you'll notice that the box expands by 5px in every direction; resulting in the box being 810px by 410px.
This can be avoided by using something like this:
div.class {
border: 5px solid black;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
This should solve your problem... hopefully!
I know select boxes are a bit of a pain to style with css, but without resorting to advanced techniques is there anyway I can add some padding to push down the text a bit without it also adding padding to the arrow on the right hand side?
add this to your CSS class. Maybe this helps?
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
Since select boxes appear differently on different browsers and especially operating systems, you cannot guarantee a consistency.
For example, the minimal amount of formatting I can do on a mac is this:
select { height:40px; background:transparent; }
And it looks like this:
#Demilio's answer is great for hiding the default selectbox. With custom styling you can then change the appearance of the selectbox as you wish.
The only remaining problem is the arrows/caret which are also gone, as mentioned by #romainnm.
Unfortunately pseudo elements (e.g. :after) don't work on a select element, so the only way around it is to create an actual element after the select, something like <div class="Caret"></div>.
Add some stylying:
.Caret {
display: block;
position: absolute;
cursor: pointer;
right: 1rem;
top: 50%;
margin-top: -1px;
width: 0;
height: 0;
border-top: 5px solid #000;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
And this should result in a custom styled select box with arrows:
Unfortunately the only downside is clicking on the arrow won't open the selectbox, and that also doesn't appear to be possible to tackle with JavaScript.
Interesting test here
http://cssdeck.com/labs/styling-select-box-with-css3
The author covered the arrow on the right hand side and created its own, using vendor prefixed css to target different browsers. after doing that, your padding is all free.
You can use border to add padding to your select element and outline for adding the border itself
.select {
border: 12px solid #FFF;
outline: 1px solid #000;
}
taking that you have a white background, this will work as 12px padding but it also adds padding to the arrow
select {
background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right #ddd;
-webkit-appearance: none;
background-position-x: 97%;
}
How do I square the corners of a submit button? Can it be done with CSS? I just noticed that Stackoverflow buttons are pretty much the same thing (don't close it for mentioning SO, just want to illustrate what I mean).
Use the following field and command in your css:
border-radius: 0;
Just add CSS to it, and the default look will dissappear.
input.button, input.submit {
border: 1px outset blue;
background-color: lightBlue;
}
edit: changed the selector to use class name instead, as suggested in comments.
You could use the HTML element instead of input type. It's quite easy to style that one.
If you specify the height and width in the css, you'll make the corners square, and retain the certain level of automatic fancy-ness that normal buttons have... and that way, you wont have to build your own.
input.button, input.submit {
height: 30px;
width: 20px;
}
I seem to remember this only working if the height is large enough, but it might work any which way.
Use border: 1px solid for the element.
<a class="test">click me</a>
<style>
.test
{
cursor: pointer;
background-color:#E0EAF1;
border-bottom:1px solid #3E6D8E;
border-right:1px solid #7F9FB6;
color:#3E6D8E;
font-size:90%;
line-height:2.2;
margin:2px 2px 2px 0;
padding:3px 4px;
text-decoration:none;
white-space:nowrap;
}
</style>
This is how a stackoverflow button is made.
I have attempted to use this CSS to set the width of my form elements:
input[type="text"], textarea { width:250px; }
If you look at this Firefox screenshot you'll see that the fields are not the same width. I get a similar effect in Safari.
alt text http://screamingv.com/ss.png
Are there any workarounds?
UPDATE: Thanks for the info so far. I've now made sure padding/margin/border on both elements are set the same. I was still having the problem. The original CSS I posted was simplified... I was also setting the height of the textarea to 200px. When I remove the height styling, the widths match. Weird. That makes no sense.
Browser bug?
Try removing padding and borders. Or try making them the same for both elements
input[type="text"],
textarea {
width:250px;
padding: 3px;
border: none;
}
Or:
input[type="text"],
textarea {
width:250px;
padding: 0;
border: 1px solid #ccc;
}
INPUT and TEXTAREA elements often have some padding applied by the browser (varies by browser) and this can make things appear effectively wider than the assigned width.
UPDATE: also box-sizing: border-box; is a handy way to set widths that that padding and border will eat into rather than add onto. See: http://www.paulirish.com/2012/box-sizing-border-box-ftw/
This answer is three years late, but I'm posting it here just in case anyone else is trying to set the width in em's and not pixels and comes across this post (as I just did). Make sure the font-size is the same,
e.g.
input, textarea {
font-size:12px;
width:20em;
padding:0;
margin:0
}
otherwise the textarea may be a different size (true on FF12).
Try border:0; or border: 1px solid #000;
This is probably caused by different default margins on the <input> and <textarea> elements. Try using something like this.
input[type="text"], textarea {
padding: 0;
margin: 0;
width:250px;
}
I was struggling with this kind of problem too, and this question was the first result of my googling. What finally worked for me was setting box-sizing: content-box for the textarea - Drupal 7 defaults this to border-box which causes the padding and border width to be subtracted from the size of the textarea.
Set width 100% and then use max-width:
textarea {
width:100%;
max-width:250px;
}
// removed margin and padding, you can add it if you want.
Maybe you have a user specific css overlay defined somewhere in your browser, because i just tested it and it works as expected: http://jsbin.com/exase/edit
(Tested on windows. Maybe Apple native widgets have some quirk?)
you may use:
input[type="text"], textarea {
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}