I am just trying to design my Search textbox like this
and I have tried like this,
border: none;
outline:none;
outline-offset: 0;
border-bottom: 1px solid;
border-color:#33B5E5;
padding:5px;
and I am getting like,
I can give style and color for border-bottom, I don't know how to design that small line in both right and left sides. can anyone help me out here, thanks in advance
You can try this:
<div class="inputWrapper">
<input type="text">
</div>
and the css:
.inputWrapper {
border-bottom: solid 1px #009999;
border-left: solid 1px #009999;
border-right: solid 1px #009999;
overflow: visible;
max-height: 2px;
display: inline-block;
padding: 2px;
}
input {
outline: none;
border: none;
background: transparent;
padding-bottom: 3px;
position: relative;
bottom: 5px;
}
The idea is basically to wrap the input with a wrapper which will have the lines of your style. Here is the fiddle: http://jsfiddle.net/jBq4u/3/
Here you go: http://codepen.io/anon/pen/rjlJv
HTML
<div id="container">
<input type="text" id="something" />
</div>
css
#container {
background-color: grey;
display: inline-body;
padding: 10px;
width: 13%;
}
#something {
border: none;
outline:none;
outline-offset: 0;
border-bottom: 1px solid;
border-color:#33B5E5;
padding:10px;
background-color: grey;
}
create one background image like you need bottom line and put there in your class for textbox. it should work I guess.
This fiddle comes a little close.
// HTML
<span class="l"> </span>
<input type="textbox" id="tb"/>
<span class="r"> </span>
// CSS
#tb{
border: none;
outline:none;
outline-offset: 0;
border-bottom: 1px solid;
border-color:#33B5E5;
padding:5px;
border-right : solid 1px #33B5E5;
border-left : solid 1px #33B5E5;
}
span.l{
position:relative;
left : 10px;
top:-2px;
background-color:white;
}
span.r{
position:relative;
left : -10px;
top:-2px;
background-color:white;
}
You can also try using Pseudo element.
Related
The problem is when I set black button background, white color, white 4px border and then border-radius say 5px the black pieces appear in the corners of the button. It happens with <input> and <button> elements. <div> tags don't suffer from it.
Is it normal and does somebody know how it could be fixed?
CodePen
HTML:
<div id=a>
<div id=b>Button</div>
<br>
<input id="but1" type="button" value="Button" />
<button id="but2">Button</button>
</div>
CSS:
div#a {
background:rgb(255, 250, 204);
width:200px;
height:120px;
padding:10px;
}
div#b {
border: 4px solid white;
padding: 5px;
background: black;
width: 70px;
color:white;
border-radius: 5px;
text-align:center;
}
#but1 {
border: 4px solid yellow;
padding: 5px;
background: black;
width: 70px;
color:white;
-moz-border-radius: 5px;
border-radius: 5px;
text-align:center;
}
#but2 {
border: 4px solid white;
padding: 5px;
background: black;
width: 70px;
color:white;
-moz-border-radius: 5px;
border-radius: 5px;
text-align:center;
}
Thank you for your answer, robjez.
Recently I've found almost the same solution. I used padding-box for the background-clip but with the background-color instead of background. Cause with the background property it only works when the background-clip is in the end of the rule. I guess it's because of the cascading inside CSS rules. And if I use background-color it works with any order of properties.
#but1 {
padding: 5px;
width: 70px;
border-radius: 5px;
color:white;
background-clip:padding-box;
background-color: black;
border: 4px solid yellow;
}
CodePen
This is kind of browsers's bug, to avoid that you need to use background-clip, like so:
#but1 {
padding: 5px;
width: 70px;
background: black;
color:white;
border: 5px solid yellow;
border-radius: 5px;
/* Prevent background color leak outs */
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip:padding-box;
}
This is described here and here
Hope this will help
I am trying to achieve something like the website here: http://bit.ly/1f55jUR (where it says Space Min.) but I fail miserably lol..
Here is what I have done until now:
<input type="text" class="textbox" id="box" /><span class="textbox2">TB</span>
.textbox {
border: 1px solid #cccccc;
outline:0;
height:22px;
width: 30px;
}
.textbox2 {
border: 1px solid #cccccc;
font-size: 16px;
background-color: #f0f0f0;
padding: 3px 6px 3px 6px;
}
Live example:
http://jsfiddle.net/55Nb3/
Any help would be highly appreciated.
Thank you!
You need to modify your html like this (span don't have the same properties than div):
HTML
<input type="text" id="textbox" /><label for="textbox" clhttp://jsfiddle.net/55Nb3/#forkass="textbox2">TB</label>
Here is the CSS
#textbox {
border: 1px solid #cccccc;
outline:0;
height:30px;
width: 30px;
border-radius: 4px 0 0 4px;
box-sizing: border-box;
font-size: 16px;
}
label {
display: inline-block;
vertical-align: top;
border: 1px solid #cccccc;
border-left: none;
font-size: 16px;
background-color: #f0f0f0;
line-height: 30px;
padding: 0 6px;
height: 30px;
border-radius: 0 4px 4px 0;
box-sizing: border-box;
}
Here is a link to it
They used Twitter Bootstrap on that website to get that styling: http://getbootstrap.com/components/#input-groups-basic.
I do it by using a mix of jQuery and CSS
jQuery
$('input[type="text"], input[type="email"], input[type="tel"], .post textarea').on('focus blur',function(e){
if(e.type == 'focus' || e.type == 'focusout'){
$(this).addClass('focussed');
} else {
$(this).removeClass('focussed');
}
});
CSS
input{
/* General style here */
}
input.focussed{
/*Different styles for focussed input here */
}
I've done an update on your fiddle: http://jsfiddle.net/55Nb3/5
It's mostly done by:
label {
display: inline-block;
}
And a few style adjustments.
It really doesn't matter if it is a label or something else.
The following HTML markup
<div id="child">
<input type="text"/>
</div>
and CSS stylesheet
input[type="text"]:focus{
border: 1px solid green;
}
#child {
border: 10px solid grey;
border: 20px black solid;
background: aqua;
height: 50px;
margin: 10px;
}
are given. But I want the effect of applying both hover and focus pseudo-classes. I think that copy-paste of code like this:
input[type="text"]:focus{
border: 1px solid green;
}
input[type="text"]:hover{
border: 1px solid green;
}
isn’t a best way, because it's very upsize code. Is there a way to do it without applying JS?
Something that helps to reduce your code by having a single style block for multiple selectos, in your case:
input[type="text"]:focus, input[type="text"]:hover
{
border: 1px solid green;
}
It's 2013 now and im just wondering if there has come a better way to achieve this? Is there a way to do this with just one element?
div.linetop { border-top: 1px solid #111111; }
div.linebottom { border-top: 1px solid #292929; }
// make a line
<div class="linetop"></div>
<div class="linebottom"></div>
Edit
This is what happens with HR the first pixel is grey :/ (im using chrome btw dont have any other browsers):
Tried both:
hr {
border-top: 1px solid #111111;
border-bottom: 1px solid #292929;
}
and
hr {
display: block;
height: 0;
padding: 0;
border-top: 1px solid #111111;
border-bottom: 1px solid #292929;
}
Edit
Solved it! Simply adding border:none before
hr {
border: none;
border-top: 1px solid #111111;
border-bottom: 1px solid #292929;
}
You could use the <hr> tag, and use both border-top and border-bottom:
hr {
border-top: 1px solid #111111;
border-bottom: 1px solid #292929;
}
The HTML is simply: <hr>.
jsFiddle here.
Possible alternative solutions:
1. CSS gradients - support info
HTML: <div class='v1'></div>
Relevant CSS:
.v1 {
background: linear-gradient(#111 50%, #292929 50%) no-repeat 50% 75%;
background-size: 80% 2px;
}
2. a :before pseudo-element & a box-shadow - support info
HTML: <div class='v2'></div>
Relevant CSS:
.v2 { position: relative; }
.v2:before {
position: absolute;
right: 10%; bottom: 20%; left: 10%;
height: 1px;
box-shadow: 0 1px #292929;
background: #111;
content: '';
}
3. :before and :after pseudo-elements - support info
HTML: <div class='v3'></div>
Relevant CSS:
.v3 { position: relative; }
.v3:before, .v3:after {
position: absolute;
right: 10%; bottom: 20%; left: 10%;
height: 1px;
background: #111;
content: '';
}
.v3:after { margin-bottom: -1px; background: #292929; }
demo
You can use <hr> tag, and use border-top and border-bottom to define you two lines color:
hr {
display: block;
height: 0;
padding: 0;
border-top: 1px solid #08f;
border-bottom: 1px solid #666;
}
CSS
#hrtag {
border-bottom: green 2px solid;
border-top: red 2px solid;
}
HTML
<hr id="hrtag"/>
If you want it to be a class then just swap the # for . and id for class. In the CSS, you can change the color to whatever you want. This was tested in Chrome.
Would you try box-shadow,like this:
HTML
<div class="hr"></div>
CCS
.hr{
border-top: 1px solid #111;
box-shadow: 0 1px 0 #292929;
}
Please view the demo.
I would like to center the following 2 buttons side by side rather than underneath one another. Here is an example of how it is looking at the moment on JS Fiddle
Could you advise me the best way to handle this? Any help is really appreciated.
Define display:inline-block to your anchor tags & define text-align:center to it's parent. Write like this:
a.button {
display:inline-block;
*display:inline;/* For IE7 */
*zoom:1;/*For IE7*/
padding: 3px 10px 3px 10px;
width:50px;
margin-left:auto;
margin-right:auto;
text-align: center;
color: #636363;
text-decoration: none;
border-top: solid 1px #ccc;
border-left: solid 1px #ccc;
border-bottom: solid 1px #ccc;
border-right: solid 1px #ccc;
}
.parent{
text-align:center;
}
HTML
<div class="parent">
<a class="button">Test</a>
<a class="button">Test</a>
</div>
Check this http://jsfiddle.net/2ws9r/11/
add a container with fixed width and margin 0 auto;
http://jsfiddle.net/2ws9r/13/
hope it helps
JSFiddle
<div>
<a class="button">Test</a>
<a class="button">Test</a>
</div>
div{ text-align: center; }
a.button {
display: inline-block;
padding: 3px 10px 3px 10px;
width:50px;
margin-left:auto;
margin-right:auto;
text-align: center;
color: #636363;
text-decoration: none;
border-top: solid 1px #ccc;
border-left: solid 1px #ccc;
border-bottom: solid 1px #ccc;
border-right: solid 1px #ccc;
}
a.button:hover {
color: #179FD9;
}