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>
Related
I am having trouble getting my hover to work on my button. I want my button to not have a border but to display a blue border when my mouse is on top of it. I also need it to change the image when the mouse is not top but that has been sorted, therefore the changeImage function :). Just need help with the border, any suggestions?
HTML
<input type="button" class = "button" onclick="changeImage('https://www.trafalgar.com/real-word/wp-content/uploads/sites/3/2019/10/giant-panda-750x400.jpg')" onmouseover="changeImage('https://www.trafalgar.com/real-word/wp-content/uploads/sites/3/2019/10/giant-panda-750x400.jpg')" value="Panda"
/>
CSS
.button {
margin-right: 20px;
width:300px;
height:300px;
background-color: transparent;
border:none;
.button:hover {
border:2px solid #0000ff;
border-radius: 20px;
}
.button {
margin-right: 20px;
width:300px;
height:300px;
background-color: transparent;
border:none;
}
.button:hover {
border: 2px solid blue;
border-radius: 20px;
cursor:pointer;
}
<input type="button" class = "button" value="Panda"
/>
Missing closing bracket }
.button {
margin-right: 20px;
width:300px;
height:300px;
background-color: transparent;
border:none;
}
.button:hover {
border:2px solid #0000ff;
border-radius: 20px;
}
<input type="button" class = "button" onclick="changeImage('https://www.trafalgar.com/real-word/wp-content/uploads/sites/3/2019/10/giant-panda-750x400.jpg')" onmouseover="changeImage('https://www.trafalgar.com/real-word/wp-content/uploads/sites/3/2019/10/giant-panda-750x400.jpg')" value="Panda" />
The border on hover will appear if you add the closing bracket to your css rule button. You just missed that ;-)
Concerning the changing of the images I am not sure if I did understand it right ... but at the end: without the JS code cannot be said much about it. Here it would be helpfull if you could show the JS code ;-)
.button {
margin-right: 20px;
width:300px;
height:300px;
background-color: transparent;
border:none;
} /* <<< add missing bracket here */
.button:hover {
border:2px solid #0000ff;
border-radius: 20px;
}
I am trying to get something like this:
I've tried using outline but I can't set the border radius on an outline. I've also tried a box shadow with a white border but I need the border to be transparent. Any ideas would be greatly appreciated.
can't set border radius of the outline with this:
.btn {
outline: 1px solid #B54104;
outline-offset: 1px;
}
gap between outline and button is not transparent:
.btn {
border: 1px solid #fff;
box-shadow: 0 0 0 1px #c5170a;
}
The gap between the button and the offset outline must be transparent.
You can try a background coloration relying on background-clip to avoid coloring a part of the button:
.button {
display:inline-block;
padding:3px; /*control the spacing*/
width:100px;
text-align:center;
line-height:30px;
border-radius:15px;
color:#fff;
border:2px solid orange;
background: orange content-box; /*color only the content*/
}
body {
background:pink;
}
<div class="button">
button
</div>
Same idea using padding-box and controling the space with border:
.button {
display:inline-block;
width:100px;
text-align:center;
line-height:30px;
border-radius:15px;
color:#fff;
border:5px solid transparent; /*control the spacing*/
background: orange padding-box; /*don't color the border*/
box-shadow: 0 0 0 2px orange;
}
body {
background:pink;
}
<div class="button">
button
</div>
border-radius now works fine with outline.
.btn {
display: inline-block;
margin: 20px;
padding: 15px 30px;
background-color: #b54204;
border-radius: 5px;
color: #fff;
outline: 2px solid #b54204;
outline-offset: 4px;
}
<div class="btn">
BUTTON
</div>
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"/>
I have few input fields on which i have given some border rounding. The problem I am facing is that a shadow appears on the right and bottom of the field. I want to control the width of it along with color and some other properties. I have used box shadow properties but that creates another shadow instead of removing or styling this one. So what is this little thing if it's not a box shadow and how to style it..
.options {
width:40px;
text-align:center;
margin-left:30px;
border-radius: 5px;
border-style:outset;
box-shadow: none;
}
<input type="text" class="options" id="3" name="1" value="3" readonly>
Fiddle
This is the default behavior for border-style:outset. You should overwrite it with something like solid.
.options {
width:40px;
text-align:center;
margin-left:30px;
border-radius: 5px;
border: solid 1px grey;
}
<input type="text" class="options" id="3" name="1" value="3" readonly />
Add border:none; or add border:1px solid grey; on your class
.options {
width:40px;
text-align:center;
margin-left:30px;
border-radius: 5px;
border-style:outset;
box-shadow: none;
border:none;
}
or
.options {
width:40px;
text-align:center;
margin-left:30px;
border-radius: 5px;
border-style:outset;
box-shadow: none;
border:1px solid grey;
}
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