How can I apply a style to a text field that displays only one line at the bottom , which disappears as you type ? I must use only css.
i mean someting like this
_surname____________
_my name____________
i've tryed this, but this is only alf of the job because line doesn't disapper
input[type="text"]
{
border: 0;
border-bottom: 1px solid black;
outline: 0;
}
input[type="text"]
{
border: 0;
border-bottom: 1px solid black;
outline: 0;
background-color:transparent;
padding:4px;
line-height:1;
}
input[type="text"]:focus {
border-bottom:none;
}
<input type="text"/>
Related
I'm Creating a button that links to Youtube, and the text inside the button doesn't respond to css code
I tried this html code:
<button class = "button"><a href = https://www.youtube.com>This is a button to youtube</a></button>
and this css:
.button {
width:100px;
height:100px;
border-radius:12px;
font-family: arial;
color: black;
font-size:15px;
text-decoration: none;
background-color:red;
border-left: solid transparent;
border-right: solid transparent;
border-top: solid transparent;
border-bottom: solid transparent;
position:relative;
top:10px;
}
you dont need to use the button tag if you use a tag
This is a button to youtube
When applying your text styles, you have to select your a element, not your button element:
.button {
width: 100px;
height: 100px;
border-radius: 12px;
background-color: red;
border-left: solid transparent;
border-right: solid transparent;
border-top: solid transparent;
border-bottom: solid transparent;
position: relative;
top: 10px;
}
.button > a {
font-family: arial;
color: black;
font-size: 15px;
text-decoration: none;
}
<button class="button"><a href = https://www.youtube.com>This is a button to youtube</a></button>
Use a tag, the browser has some default behavior. If you don't like, you can use JavaScript to navigator to youtube
<button class = "button" onclick="window.open('https://www.youtube.com', '_blank')">This is a button to youtube</button>
I'm looking at a text boxes here. They have a very nice effect. How can I achieve same effect with CSS. This is what I'm able to get but it's not close to that.
What I'm trying to achieve:
By default the textbox has greyish outline and when on focus it changes to blue color. I want a similar effect. I tried using outline property and shadows (in code below) but couldn't get that.
My attempt to get that effect (https://jsfiddle.net/7jphmdzf/):
#tags {
width:500px;
height:30px;
border: 1px solid grey;
border-radius: 10px;
}
input:focus {
outline: 0;
box-shadow: 0 0 0 0.7pt blue;
}
<div class="ui-widget">
<input id="tags">
</div>
You can use the following solution (https://jsfiddle.net/7jphmdzf/1/):
#tags {
outline:0;
width:500px;
height:30px;
border: 2px solid #ccc;
border-radius: 8px;
font-size:24px;
padding:8px 12px;
}
#tags:focus {
outline:0;
border: 2px solid #0097cf;
border-radius: 8px;
}
<div class="ui-widget">
<input id="tags" placeholder="Tags">
</div>
To change the color of the outline on :focus you have to set the border. There is no need for styling the outline or box-shadow of the <input>.
Try This,
#tags {
width:200px;
height:30px;
border: 2px solid grey;
border-radius: 10px;
}
#tags:focus {
outline: 0;
border: 2px solid #109cdf;
}
<div class="ui-widget">
<input id="tags">
</div>
I have css that adds a border around a list items, but when I add the padding, the list items' borders start crossing over each other. Here is my current css for the Li:
.display_times{padding: 5px 10px 5px 10px !important; font-size: 24px; border:1px solid black; display:inline; }
Here's a picture of what it looks like.
Is there any way to keep the padding but push the borders back so that they are more like this, but with padding:
It seems this css works:
.display_times {
padding: 5px 10px 5px 10px !important;
font-size: 24px;
border:1px solid black;
display: inline-block;
}
Not sure if this is what you are after but:
HTML
<ul>
<li>10:00</li>
<li>12:00</li>
<li>13:00</li>
</ul>
CSS
ul{
padding: 0;
list-style: none;
border:1px solid black;
}
li {
border-bottom: 1px solid black;
}
li:last-child{
border-bottom: 0;
}
Here's one way to do it.
div {
width: 50px;
text-align: center;
border-top: 1px solid black;
border-left: 1px solid black;
border-right: 1px solid black;
padding: 5px;
}
.last {
border-bottom: 1px solid black;
}
<div>11:00</div>
<div>12:00</div>
<div>13:00</div>
<div class="last">14:00</div>
Don't Ever use display:Inline, if you want to give the elements a specified padding or height, because these properties doesn't apply to inline.
You Can Only Set left or right width using Inline, better always use for such situation inline-block.
I want to create a border as shown in the image. I tried with all the styles inset, outset,ridge and groove but I was not able to get the expected result.
Is there any way to bend border towards inside till middle and get back towards till top(hope you understand the problem).
If it's repeated question please add the solution link.
Thanks in advance.
I have tried this:
div {
border-bottom: 1px ridge #B5B9BB;
/*border-bottom: 1px inset #B5B9BB;
border-bottom: 1px outset #B5B9BB;
border-bottom: 1px groove #B5B9BB; */
}
You could use outline:
.bordered {
border-bottom: 1px solid grey;
background: aliceblue;
outline: 5px solid aliceblue;
}
<div class="bordered">Available Apps</div>
Demo
Seems why not just use a border on the text?
div {
background: lightgrey;
padding: 0.5em;
}
p {
border-bottom: 1px ridge #B5B9BB;
}
<div>
<p>Available Apps</p>
</div>
It is probably best to use a wrapping element if possible; it is more flexible than outline (supports border-radius, box-shadows etc.)
For example:
<div class="headline-area">
<h2>Available Apps</h2>
</div>
with the CSS:
.headline-area {
background:#D4D9DC;
padding:5px;
}
.headline-area h2 {
border-bottom:1px solid #B5B9BB;
}
Whenever I am in your situation I use box-shadow:
body {
background:#D1D6D9;
font-family:verdana;
}
div {
border-bottom: 1px solid #B5B9BB;
box-shadow:0 1px 1px rgba(255,255,255,.7);
padding-bottom:5px;
}
<div>Available Apps</div>
You could always try a hr tag. You can then style it in CSS to your desired preference.
HTML
New apps
<hr>
Try this Also but you need an extra Div to do so.
HTML
<div class="outerDiv">
COntent
<div class="innerDiV">
</div>
<div>
CSS
.outerDiv{
background-color: grey;
height: 32px;
text-align: center;
padding: 16px;
font-weight: bolder;
font-size: 25px;
}
.innerDiV{
margin: 0 auto;
border: 1px solid black;
width: 98%;
margin-top: 10px;
}
Demo
Nobel Prize to anyone who can help me out with this.
I need to create the following style:
Constraints: Can only use CSS. That field is generated as an h3 tag by the content management system. Cannot write HTML to place it inside a wrapper. Would prefer not to use a background image since the client has not given me one. Cannot to resort to JavaScript because this style needs to apply to multiple pages and I don't have a global JavaScript file in the environment I'm using.
Here's a fiddle: http://jsfiddle.net/d7qrLLug/
You can achieve this using css borders:
JS Fiddle
h3 {
color: #FFF;
text-transform: uppercase;
background-color: #423025;
padding: 5px;
border-top: 1px solid white;
border-bottom: 1px solid white;
border-style: double;
border-width:4px;
border-left: none;
border-left: none;
}
You can achieve this using before and after pseudo elements.
h3:before, h3:after {
border-top: solid 1px white;
content: "";
display: block;
}
See this jsfiddle:
http://jsfiddle.net/d7qrLLug/5/
That's actually very simple:
Demo: http://jsfiddle.net/d7qrLLug/11/
h3 {
color: #FFF;
text-transform: uppercase;
background-color: #423025;
padding: 5px;
position:relative;
}
h3:before {
position:absolute;
top: 3px;
display:block;
width:100%;
content:" ";
border-top: 1px solid #fff;
}
h3:after {
position:absolute;
bottom: 3px;
display:block;
width:100%;
content:" ";
border-top: 1px solid #fff;
}
Note: You need absolute positioning on :before and :after to not change the original height of the produced h3 element, if that isn't important, this will do the job:
Demo http://jsfiddle.net/d7qrLLug/12/
h3:before,
h3:after {
display:block;
width:100%;
content:"";
border-top: 1px solid #fff;
}