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;
}
Related
I'm trying to create some CSS triangles, using css and the :after pseudo class. Somehow, the up and down arrows are working properly, but the left and right arrows are being "cut off" (see fiddle: http://jsfiddle.net/K9vxN/ )
This is basically the css I'm using:
.arrow-right:after {
content:"";
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
Does anyone know why this is happening?
Make the :after pseudo element inline-block (or block). Currently it's an inline element, and it's size is based on the line height of the (empty) text it contains.
You'll have to fix some positioning then, though, but that should be trivial.
div { height:0px; }
div:after { content:""; display: block;}
.arrow-up:after {
margin-left: 50px; /* move right, to show it */
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid black;
}
.arrow-down:after {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
.arrow-right:after {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-left:after {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;
}
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>
http://jsfiddle.net/K9vxN/2/
By the way, you might not need to use :after at all, but that depends on whether you want the div to have an arrow or to be an arrow. That's up to you. ;)
Simply add display: block to all your :after selectors. For example
.arrow-up:after {
display: block; /* Added this */
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
Here's a demo
Ensure the :after pseudo-element is specified as either block or inline-block, dependent upon your usage scenario.
div:after {
content:"";
display: block;
}
See http://jsfiddle.net/kFa6a/
your pseudo-element needs layout to be triggered:
you can set as display:block; or any other value of display but inline.
You can use as well float or position:absolute/fixed to trigger layout.
http://jsfiddle.net/K9vxN/5/
div:after {
content:"";
display:block;/* or table, inline-table,inline-block, but not inline*/
/* to your choice, where it suits design the best */
/* pick up here instead display*/
/*position:absolute;*//* or fixed */;
/* float:left;*//* or right */
}
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.
I have two "inline-block" buttons, see the image below:
But, if you click, you will see the other button two pixels down.
Example: http://jsfiddle.net/caio/EUjeY/.
.button {
border-radius: 2px;
border: 1px solid #ddd;
border-bottom: 3px solid #ccc;
background: #eee;
padding: 5px 10px;
display: inline-block;
}
.button:hover {
background: #e7e7e7;
}
.button:active {
border-bottom: 1px solid #ddd;
padding: 7px 10px 5px;
}
Can you help me to prevent this?
Thanks.
you can add this to your .button class:
vertical-align: top;
Working example: http://jsfiddle.net/uW7Sa/1/
Just give .button the css property float: left and both buttons will remain at the same location. This is because float: left removes the button from the flow of the document, so aside from the containing div, it isn't affected by other, inline elements:
.button {
border-radius: 2px;
border: 1px solid #ddd;
border-bottom: 3px solid #ccc;
background: #eee;
padding: 5px 10px;
display: inline-block;
float: left;
}
DEMO
I would provide more code because I'm using a float here, but I don't know what the rest of your document looks like, so I can't compensate.
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;
}
I am trying to create 2 buttons of the same width that will look as following:
White text in a blue square with black border and with margin of lets say 5px from each side:
this is my css code:
a.button
{
background-color: Blue;
border-width: 2px;
border-color: Black;
color: White;
padding: 2px 5px 2px 5px;
width:100px;
margin: 5px;
}
But what I am getting is:
I am using Google Chrome browser, and when I click on "inspect element" I can see all my css properties there, but my application is ignoring them.
You need to declare the border style (solid in your case)
Try the following
a.button
{
background-color: Blue;
border: 2px solid black;
color: White;
padding: 2px 5px;
width:100px;
text-align:center;
margin: 5px;
display:inline-block;
text-decoration:none;
}
You will need to adjust the css, and add hover and active states.
Example: http://jsfiddle.net/3tKS7/
Make your element an inline-block:
a.button
{
background-color: Blue;
border-width: 2px;
border-color: Black;
color: White;
padding: 2px 5px 2px 5px;
width:100px;
margin: 5px;
display: inline-block;
}
Not sure if the capitalized color names are helping either.