I trying to create input, that has border-bottom and small (in height) borders in sides like that:
But this code didn't work:
input:before, input:after {
display: block;
height: 5px;
width: 1px;
background: #f00;
}
The problem is that the ::after pseudo element puts the pseudo element inside the element that you select that, so an input can't have ::before or ::after.
Secondly the pseudo element normally requires content:" ";
Here is a working example
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.input input {
font-size:20px;
}
.input {
border:none;
display:inline-block;
border-bottom:solid red 1px;
}
.input:before, .input:after {
content:" ";
display: inline-block;
vertical-align:bottom;
height: 5px;
width: 1px;
background: #f00;
}
</style>
</head>
<body>
<div class="input">
<input value="Text" />
</div>
</body>
</html>
so here is my example :
span {
display:inline-block;
border-bottom:red solid 1px;
position:relative;
}
span:before, span:after {
content:'';
position:absolute;
bottom:-1px ;
height:10px;
border-left:solid red 1px;
}
<span><input/></span>
see it here http://codepen.io/gc-nomade/pen/bfDwy
you van also set this by only border css like:
border-bottom: red thin solid;
width: 100px;
border-left: thin solid red;
border-right: red thin solid;
height: 20px;
text-align: center;
Related
How to use CSS doing like this? especially double borders (NOT using border:double;)
PS: The HTML code of the Demo: ....1801180218031804 ...
You basically use nesting, meaning the parent container (.container) has a border and the child element (.childdiv) has a border. The html (for a single cell) would look like this:
.container,
.childdiv {
padding: 20px;
border: 1px solid black;
}
.container {
display: inline-block;
width: 70px;
}
.childdiv {
display: inline-block;
width: 30px;
}
<div class="container">
<div class="childdiv">
</div>
</div>
Check out the fiddle for a working demo.
Try This:
div {
border:1px solid #ccc;
padding: 10px;
display: inline-block;
}
div:before {
content: attr(data);
display: inline-block;
border:1px solid #ccc;
padding: 10px;
}
<div data="1898"></div>
Code
<div style="width:10px;height:10px;border:1px solid #F00;background:red;"></div>
<p>Red</p>
<div style="width:10px;height:10px;border:1px solid #00F;background:blue;"></div>
<p>Blue</p>
In the above code I expect two square box followed by the color name in different line. But it gives the box in one line and the para in
another line. How to achieve this in the same line like
[] Red
[] Blue
For a quick fix just add this to your CSS:
p,div{
display: inline-block;
}
This way will change properties of all your div and p elements.
Usually you would assaign classes to elements so you can target them from one place and only target them.
Try the following solution:
div {
display:inline-block;
width:10px;
height:10px;
border:1px solid #F00;
margin-right:5px;
}
p {
display:inline;
}
p:after {
content:"\A";
white-space:pre;
}
<div style="background:red;"></div><p>Red</p>
<div style="background:blue;"></div><p>Blue</p>
Hint: I would wrap these items to avoid overwriting the CSS of other <p> and <div> items, like the following:
.legend div {
display:inline-block;
width:10px;
height:10px;
border:1px solid #F00;
margin-right:5px;
}
.legend p {
display:inline;
}
.legend p:after {
content:"\A";
white-space:pre;
}
<div class="legend">
<div style="background:red;"></div><p>Red</p>
<div style="background:blue;"></div><p>Blue</p>
</div>
<div>line #1 (with div).</div>
<p>line #2 (with p).</p>
you can achieve this in so many ways, here is one:
inline-block
div {
width: 10px;
height: 10px;
border: 1px solid #F00;
}
div:first-of-type {
background: red
}
div:nth-of-type(2) {
background: blue
}
div,
p {
display: inline-block
}
<div></div>
<p>Red</p>
<div></div>
<p>Blue</p>
using span (which is an inline element)
div {
width: 10px;
height: 10px;
border: 1px solid #F00;
}
div:first-of-type {
background: red
}
div:nth-of-type(2) {
background: blue
}
div {
display: inline-block
}
<div></div>
<span>Red</span>
<div></div>
<span>Blue</span>
using pseudo-element ::before
span {
position: relative;
padding-left:15px
}
span::before {
width: 10px;
height: 10px;
border: 1px solid #F00;
content: '';
position: absolute;
left: 0;
top:3px
}
span:first-of-type::before {
background: red
}
span:nth-of-type(2)::before {
background: blue
}
<span>Red</span>
<span>Blue</span>
I wanted to put an image inside a text input box and tried to position the image by nesting the image tag inside the input tag and using relative position for the input and absolute positioning for the image and setting the images 'right' and 'top' value to 0. I thought this would place the image on the right hand side of the text box. Instead it placed the image on the right hand side of the webpage. I'm unsure why this is, I found a solution by changing the 'top' and 'right' values to position it where I wanted but it just seemed like the first way should have worked, could anyone explain why it didn't?
This is the HTML for the text input and image.
<input = "text" id="searchbar">
<img src ="microphone.png" id="voicebutton"/>
</input>
This is the CSS I though would work.
#searchbar{
border: 0.6px solid #dbdbdb;
display:block;
margin-left:auto;
margin-right:auto;
width:600px;
height:37.5px;
position:relative;
}
#voicebutton{
width:16px;
height:23px;
position:absolute;
right:0;
top:0;
}
This is the CSS that worked.
#searchbar{
border: 0.6px solid #dbdbdb;
display:block;
margin-left:auto;
margin-right:auto;
width:600px;
height:37.5px;
position:relative;
}
#voicebutton{
width:16px;
height:23px;
position:absolute;
right:395;
top:207;
}
Three ways to do it:
1- Use the properties background-size and background-position to set your background-image inside the input-box. Example:
input[type=text] {
box-sizing: border-box;
padding-left: 10px;
font-size: 40px;
width:85%;
height:55px;
border: 2px solid black;
background-color: floralwhite;
background-image: url("https://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/actions/emoticon.png");
background-size: 50px 50px;
background-repeat: no-repeat;
background-position: 99% 100%;
}
input[type=text]:focus {
background-color: pink;
outline: none;
}
<input type="text" placeholder="write here" id="searchbar">
2- Use a negative margin to place the image over it (you can set the image to be a link). Example:
input[type=text] {
box-sizing: border-box;
padding-left: 10px;
font-size: 40px;
width:85%;
height:55px;
border: 2px solid black;
background-color: honeydew;
vertical-align: top;
}
input[type=text]:focus {
background-color: skyblue;
outline: none;
}
img {
margin-top: 3px;
margin-left: -55px;
}
<input type="text" placeholder="write here" id="searchbar"><image src="https://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/actions/emoticon.png" alt=img style="width:50px; height:50px;">
3- Let both inputbox and image inside a container; set the container position: relative and the image position: absolute (you can set the image to be a link). Example:
input[type=text] {
box-sizing: border-box;
padding-left: 10px;
font-size: 40px;
width:100%;
height:55px;
border: 2px solid black;
background-color: MintCream;
vertical-align: top;
}
input[type=text]:focus {
background-color: LightGreen;
outline: none;
}
img {
position: absolute;
top: 3px;
right: 5px;
}
#container {
position: relative;
width:85%;
}
<div id="container">
<input type="text" placeholder="write here" id="searchbar">
<image src="https://cdn1.iconfinder.com/data/icons/DarkGlass_Reworked/128x128/actions/emoticon.png" alt=img style="width:50px; height:50px;">
</div>
First of all, you can't have decimals in your pixels, like height: 37.5px;. This won't work. Also right: 395; does not work, because it doesn't specify what usage: pixels, ems, percentage? The input="text" is incorrect, it should be input type="text" as this can be e.g. email or radio.
That said, to achieve what you want, you can add a wrapper around your input field (like .box-wrapper) and give it a relative positioning with the same size as the input field. This will conclude to the example below.
.box-wrapper {
position: relative;
width: 600px;
height: 38px;
}
#searchbar{
border: 1px solid #dbdbdb;
display: block;
margin-left: auto;
margin-right: auto;
width: 600px;
height: 38px;
position: relative;
}
#voicebutton{
width: 16px;
height: 23px;
position: absolute;
top: 0;
right: 0;
}
<div class="box-wrapper">
<input type="text" id="searchbar">
<img src ="http://dummyimage.com/50x50/ffff00/fff" id="voicebutton"/>
</div>
The input tag has no closing tag in HTML, you should remove the closing tag from your HTML code, additionally you can position the element over the input box changing your CSS to something like this (your CSS was almost right, the problem is the HTML) :
#voicebutton{
width:16px;
height:23px;
position:absolute;
right:16px;
top:16px;
}
In HTML, the input tag has no end tag (as opposed to XHTML), so your a tag is outside of your input tag.
I just have a container div-element that contains two div-elements that should appear at the same level on both sides of the container-div. The following solution does not work:
<div id="result" >
<div class="right">Update</div>
<div class="left">delete</div>
</div>
stylesheet follows:
div.left{
position:absolute;
left: 5px;
top:0px;
color: green;
border-style:solid;
border-color: green;
}
div.right{
position:absolute;
right: 2px;
top:0px;
color: red;
border-style:solid;
border-color: red;
}
#result{
position:relative;
width:100%;
border-style:solid;
border-color: blue;
}
The blue margin from the container-div does not contains the the other two divs and appears on top of the other two containers.
What am I missing? Thanks!
Ideally the .left and .right divs would be floated:
div.left{
float: left;
margin: 5px;
color: green;
border-style:solid;
border-color: green;
}
div.right{
float: right;
margin: 5px;
color: red;
border-style:solid;
border-color: red;
}
you have put position which is not needed basically.
see below answer
html here
<div id="result" >
<div class="right">Update</div>
<div class="left">delete</div>
</div>
css here
div.left{
left: 5px;
top:0px;
color: green;
border-style:solid;
border-color: green;
float:left;
}
div.right{
right: 2px;
top:0px;
color: red;
border-style:solid;
border-color: red;
float:right;
}
#result{
width:100%;
border-style:solid;
border-color: blue;
float:left;
}
live example here.
http://codepen.io/anon/pen/waKrH
please mark as answer if this helped you.
What you could try is float:left to both of the elements your trying to put side by side, that should push-force them, see if it works and let me know.
Are you trying to achieve this fiddle?
Better way is to change the apsolute into relative,with floating.
And if you use floating, dont forget to add overflow:hidden; to the parent container.
How can I have proper borders around the midItem element?
http://jsfiddle.net/PmfLm/
Here is the minified code of the same fiddle,
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<style type="text/css">
span,.midItem {
border-style: solid;
}
.midItem {
border-color: blue;
padding: 5px;
}
p {
text-align:justify;
}
.leftPage,.rightPage{
display:inline-block;
width: 33%;
padding: 5px;
}
.centerBox {
display:table-cell;
text-align: center;
vertical-align: middle;
}
.leftBox,.rightBox {
display: table;
border-style:dotted;
border-width:5px;
width: 100px;
height: 100px;
border-color:green;
}
.leftBox,.leftPage {
float:left;
}
.rightBox,.rightPage {
float:right;
}
</style>
</head>
<body>
<span class="leftPage"><span class="leftBox"><p class="centerBox">Leftbox</p></span>
<p>Some Text</p>
</span>
<span class="rightPage"><span class="rightBox"><p class="centerBox">rightBox</p></span>
<p>SomeText</p>
</span>
<p class="midItem">SomeText</p>
</body>
</html>
Not getting your question properly but do you need something like this? If yes than clear your floats, use overflow: hidden; for the container div
Demo
CSS
span,.midItem {
border-style: solid;
overflow: hidden;
}
If you use table-cell to get the same height in all elements, then you should set it to all three elements
.midItem {
border-color: blue;
padding: 5px;
display:table-cell;
}
.leftBox,.leftPage {
display:table-cell;
}
.rightBox,.rightPage {
display:table-cell;
}
http://jsfiddle.net/PmfLm/3/