Which css should I apply to textbox that make it same as background means user does not feel like he is typing in textbox? I tried giving same background color but it still doesn't provide exact what I want. User still can feel that it's a textbox.
Do you mean like this?
input {
border: 0;
background: transparent /* the important bit */
}
Live Demo (I added a blue border on a parent element so you can see where the <input> is)
http://jsfiddle.net/eUmr2/1/ (with gradient background to more easily see the transparent)
Appears to work in IE6:
If I understand your question correctly, you should first of all "hide" borders of textarea or input field. You can simply use "border:none;" property for this. In this case, if both backgrounds will be the same (e.g. textarea and rest of the container) it will be displayed like you need.
I don't know exactly what are you trying to achieve, but this method is used usually for not standard designs of form fields. The only you need to do is to be sure that this part of your page is OK from usability point of view.
Good luck!
Remove the borders and apply the same background color as the container it's in.
Related
Check this out:
http://codepen.io/maxwbailey/pen/vGKBr
Now, they look fine when you aren't hovering over them, but when you hover over the <button> and <input> elements, you'll see that the text below them is bumped around a bit, while hovering over the <a> element does not cause the same effect. That's because the <button> and <input> elements are displaying as inline-blocks still (which handle borders, padding, and margins differently than regular inlines), despite the display: inline !important; line that is applied to them.
Is there anyway to override this? I know it's doable via hacks like borders with the same colour as the background, etc. but I'd really like to know if there's a way to make them display: inline properly.
Note: The problem here isn't about the text being bumped around (though that is an effect of it), it's that, despite everything saying otherwise, the browser is still forcing the button to display as an inline-block. Thanks to everyone who's provided methods to prevent the text bumping from happening, but that's not the real problem here.
Thanks!
Not sure the context of why your markup exists like this, but the issue looks like it's being triggered by setting the font-family. If you take a look at this pen - http://codepen.io/pnts/pen/Egwuo - the hover works fine without a font-family specified, but if you uncomment the line specifying one, the jumping begins.
It seems your question is a little misleading. Your button tag IS in fact set to display:inline on both normal and hover states. It sounds like the question you have is how to prevent the text below from getting bumped down on rollover. Instead of using a bottom border as you are currently, why not use the following in the hover state to achieve the underline?
text-decoration:underline;
agree with the previous answer, however if you want the flexibility of a border, being able to use padding to adjust where it lays etc, you could use
border:1px solid transparent;
not as hacky as using the same color as you bg because it doesn't matter the color of the background that way.
I'm using a text widget, Black Studio TinyMCE, in WordPress. For some reason, I cannot get the background color to match the background of the header (#192E82). Currently, the header looks like this -- as you can see, there's a white outline surrounding the text area:
And when I Firebug the selection, Firebug shows this:
I can add whatever custom CSS I'd like to. But I'm not sure how to do so. I'm unsure which class I should use a # before, if any, or which class I should use a . before. Ultimately, I'd like to make that white area around the edge to match the background color of the header.
For instance, this doesn't work -- in fact, nothing I've tried works!
#widget-wrap .textwidget {
background-color:#192E82;
}
Does anybody know how I can accomplish getting the white to match the header background? Any guidance would be appreciated!
EDIT: Here's a Fiddle of everything I could find:
http://jsfiddle.net/jasonpaulweber/nvkVT/
Hard to give a precise answer with only the info included, but I would inspect one element at a time, from the <strong> and upwards in the hierarchy, and look for an element with either a white background-color and a padding, or a thick white border. If you do that I'm sure you'll spot it. Once you've identified it just let me know and I'll try and help you targeting it with a CSS selector.
According to the fiddle, the white space is padding of the header-right element
You should set
#header-right {
background-color:#192E82;
}
i have an transparent overlay and an input field under it. I have also buttons under this overlay.
To make the buttons work i write pointer-events:none as an css attribute at the overlay.
Are there an similar command to make input fields work?
Pointer events:none does not work cross browser. I would suggest finding a way to bring the inputs to the top of the page. Perhaps the attribute
z-index:10; /*You also need to use position:relative; for this to take effect*/
would better suit the job?
I can also expand on my answer if you could post a link to where you are doing development on this.
Thanks
I'm using Aristo's CSS3 buttons seen here. One thing I like about Facebook's buttons are the little sliver of grey between the border and background of blue button elements. To see this go to "Messages" then "New Message" .. the Send button has just a bit of grey to make it pop out. It looks like this is achieved with this bit of code:
background-position: 0px -17px;
I've put up my attempts on jsfiddle here. My goal is to avoid creating a nested element if possible. I guess I could also create an image and set that as the background, but I was hoping this would possible just with CSS. Thanks!
Perhaps you could use the outline property for the border, and then you get to use the border property for the highlight.
Webkit decided there weren't enough browser incompatibilities and added 2px of padding to my textarea. However, if I set padding:0 then it looks awful when typed in. Is there a way I can make it the same size without destroying the display? (It seems like -webkit-padding-start:2px and -webkit-padding-start:2px will fix the left and right, but there are not corresponding properties for the top and bottom)
Also, there's some type of little handle in the bottom right corner to allow resizing of the textarea. Any idea what CSS property might turn this off?
For the second part of your question try this:
textarea
{
resize:none;
}
Just had this problem myself. Try:
<textarea style="margin-left:0;">