I want to change the look of search box. In stackoverlow, as you can see, the search box is exactly rectangular. I want to have a search box like elips( at the borders ), not rectangular.
How can it be done?
Thanks
You can do this
.ClassNameOfYourSearch {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Change the number for the px as necessary.
Example: http://jsfiddle.net/jasongennaro/nynxE/
<!DOCTYPE html>
<head>
<title>Sample Search Boxt</title>
<style>
#search {
border: 1px solid #CCC;
width: 100%; height: 25px;
-moz-border-radius: 3px 3px 3px 3px;
-webkit-border-radius: 3px 3px 3px 3px;
-khtml-border-radius: 3px 3px 3px 3px;
}
input[type="text"] {
outline: none;
border: none;
}
</style>
</head>
<body>
<input type="text" id="search" />
</body>
</html>
You can run that directly into the notepad++ or whatever tool your using. I didn't include the JavaScript that their using to add that grey click affect, but this has the border radius that you can mess around with.
Example Here
You can use border-radius on the input element.
Or you could use type="search", which a lot of browsers are rounding by default. I'd still recommend adding border-radius too as the default of the browser's CSS are vendor specific.
Related
i want to add border to the bootstrap form box.i had added border style properties but its not working . suggest please
thia is the form box class:
<div class="form-box">
<div class="form-top">
<div class="form-top-left">
And this is the css :
.form-box {
margin-top: 0px;
border-radius: 25px;
border-bottom-style: solid;
border-color: #50e54b;
}
Because of other classes, use the "!important"
border: solid 2px #50e54b!important;
You can add border to your box by using the border CSS property [border](https://developer.mozilla.org/en-US/docs/Web/CSS/border)
Here's an example usage:
border: 1px solid #FFFFFF;
The code above will add a solid border of 1px in thickness and white in colour.
Click the link above to see more about the border property.
From what I can tell, the code works fine. But if you want you can add an 8px padding so the content has room for placement instead of being crammed in there with the border. By the way, a 2px or 4px border radius looks better for the border, but it's up to you.
.form-box {
padding: 8px; /*makes it look neat*/
border-radius: 4px; /*or 2px*/
border: 1px solid red;
}
how can we adjust the border radius of the input field focus.
HTML
<input type="text" class="rest" />
CSS
.rest{border-radius:15px;border:1px solid red;}
Removed the standard outline (which does not accept border-radius) and used a blue box-shadow instead:
.rest{
border-radius: 15px;
border: 1px solid grey;
padding-left: 8px;
}
.rest:focus {
outline: none;
box-shadow: 0px 0px 2px #0066ff;
}
<input type="text" class="rest" />
codepen demo
use the :focus pseudo selector
.rest:focus{
border-radius:0;
}
DEMO
You have to disable the outline of the element focus state:
*:focus { /*OR .rest:focus*/
outline:none;
}
Here is a FIDDLE
If you want the border-radius on the browser default focus outline you can do it only on firefox with -moz-outline-border:5px; , but this will only work on FF, however the request to implement a similar feature in WebKit was closed as WONTFIX, The plan for the future is to make the outlines follow the borders.
The other answers have covered the solution, however, the supplied CSS styles do not accurately reproduce the blue ring color or size. For example, replacing:
:focus {
outline: -webkit-focus-ring-color auto 5px;
}
With the solutions provided, results in a purple-tinted blue
before and after pic. Instead, try this color:
.rest:focus {
outline: none;
border-radius: 8px; /* Your border radius here */
box-shadow: 0px 0px 1px rgba(0,100,255,1),
0px 0px 2px rgba(0,100,255,1),
0px 0px 3px rgba(0,100,255,1); /* #0064FF */
}
Removing the default outline when input is in focus and adding a border that should match the border radius of the default state of input
.rest:focus {
outline: none;
border: 1px blue solid;
}
I have this issue with <input type="text">where I see some extra border in top and left of the input box.
I have this CSS code -
#add{
width: 60%;
height: 25px;
margin: 0 auto;
border: auto;
border-radius: 10px;
}
I am attaching the screenshot from chrome. Firefox shows the same thing.
Try
#add{
width: 60%;
height: 25px;
margin: 0 auto;
border: none; /* <-- This thing here */
border:solid 1px #ccc;
border-radius: 10px;
}
By setting it to border:none the default css of the text field will be gone and your ready to style it for yourself.
Demo
#add {
width: 60%;
height: 25px;
margin: 0 auto;
border: 1px solid black;
border-radius: 10px;
}
Border auto is doing that for you. So have your own defined border style.
I noticed in Chrome that the user agent style that causes this specific look is border-style: inset; You can see it in the snippet below. Chrome is handy about indicating the user agent styles. I found two ways to fix this appearance.
Simply set border: 1px solid black; and you notice that the border will lose that inset look.
If you want extra caution, you can set border-style: none; This will cause the border to disappear altogether. You can then set the border as you wish.
I would test any of these solutions across different browsers.
Chrome User Agent Stylesheet:
input {
-webkit-appearance: textfield;
background-color: white;
-webkit-rtl-ordering: logical;
cursor: text;
padding: 1px;
border-width: 2px;
border-style: inset; /* This rule adds the inset border */
border-color: initial;
border-image: initial;
}
By setting the border: none; will override/nullify the default input css of the text field and then you can add your own custom css to beautify the input text element like so:
border: none; /*removes the default css*/
border: 1px solid black; /*your custom css*/
border-radius: 10px; /*your-border radius*/
However the above method is unnecessarily tedious whereas you could achieve the same result in just a single line with:
border-radius: 10px !important; /*this simply does the trick!!!*/
**Note:** The !important property in CSS is used to provide more weight (importance)
than normal property. It means that “this is important”, ignore all the subsequent
rules
<input type="text" style="border-radius: 25px;" /> 100% works
Try this thing
I want to make custom password in HTML But when i am running it with browser like chrome , Mozilla its not visible there.Please find my HTML & CSS.What wrong i am doing?
<link href="mypwd.css" rel="stylesheet" type="text/css" />
<input type="password" class="pwd">
CSS File:
.pwd{
border: 3px;
border-color: red;
}
It's there, you just haven't defined a proper border.
Try this:
.pwd {
border: 3px solid red;
}
Or if you'd rather not use shorthand:
.pwd {
border-color: red;
border-style: solid;
border-width: 3px;
}
<link> will have to be in the <head> as far as I know.
Also border should be:
border: 3px solid red;
Change your class to
.pwd{
border : 3px solid red;
}
For more infor check this fiddle
I'm looking at the buttons used on twitter's home page, specifically the big orange 'signup' button. I see it is defined like this:
<p id="signup-btn">
<a id="signup_submit" href="/signup">
<span>Sign Up</span>
</a>
</p>
are they just using css to give the orange button appearance (which may just be a jpg), and also using css to specify the roll-over appearance (another jpg), and finally a third state for mouse-click (another jpg) to give the impression of a real clickable button?
If that's how it works, what should I look for to do the same thing? In my case I just want to make a button I guess, like:
<div class='mybutton'>Hello!</div>
.mybutton {
bgcolor: red;
bgcolor-mouseover: yellow;
bgcolor-mousedown: green;
}
yeah something like that would be great,
Thanks
Look at their CSS:
background: #FA2 url(http://s.twimg.com/a/1275412898/images/fronts/bg-btn-signup.png) repeat-x 0px 0px;
border: 1px solid #FA2;
border-bottom-left-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
border-top-right-radius: 5px 5px;
color: #333;
display: block;
font: normal normal bold 18px/normal Arial, sans-serif;
padding: 8px 10px;
text-align: center;
text-decoration: none;
text-shadow: #FE6 0px 1px 0px;
Haven't looked at it specifically, but that is entirely possible with CSS; they probably have a named style using the #signup-btn designation in CSS. To find out, you can use IE or FireFox with FireBug to examine the CSS and see exactly what they do for the button style. I would highly recommend that.
HTH.
I'd use a BUTTON element and CSS sprites. That way, you can style it however you like, and don't have to screw around with click() events in JS. Just use it wherever you'd use a regular button in a form.
EDIT: Coronatus, you should probably read this: Rediscovering the Button Element. They're remarkably easy to make visually consistent across browsers using a little CSS.