I have done a lot of researching on this topic and couldn't find the right answer.
I have an input button that I want to have a grey border with a white background. But when I set the background to white, it automatically creates a shadow like border on the bottom and right of the button. I can't seem a way to remove it. Below is the css code and the HTML
Any help would be really appreciated. Thanks!
CSS:
input{
display: inline-block;
height: 40px;
width: 380px;
cursor: pointer;
font-weight: bold;
font-size: 14px;
background-color: white;
}
HTML:
<input id="sign_in" type="submit" value="Sign In">
You said you want a grey border around your button but you haven't applied it in your css.
Update your css:
input{
display: inline-block;
height: 40px;
width: 380px;
cursor: pointer;
font-weight: bold;
font-size: 14px;
background-color: white;
border: 2px solid grey; /*Add your border property*/
}
Browsers add retro borders once you change the background color of a button. Fixing it is as simple as adding the following rules:
outline: 0;
border: 1px solid grey;
Related
I need to underline text in input that will display value of expression (I'm making a calculator).
If I use text-decoration: underline the line is too thick and too close to the text.
I need to make line like this. Line should underline only text, not a whole input.
I use fixed width: 200px for input (max value can be five-digit of six-digit). If I don't set width input takes 100% of available place. Thus we can't use border-bottom because line have width like input, but text have line about 70% of input width and we'll get something like this .
If it possible, we shouldn't use JavaScript, only CSS.
JSFiddle
.calc__total-cost {
font-size: 56px;
font-weight: 700;
width: 200px;
height: 60px;
background: transparent;
color: #efae02;
text-align: right;
text-decoration: underline;
}
<div class="calc__total">
<input type="text" class="calc__total-cost" id="calc__total-cost-value" value="5000">
</div>
You can use something like this:
.calc__total-cost{
border: none;
}
.calc__total-cost:active, .calc__total-cost:focus{
border: none;
outline: none;
}
.calc__total{
position: relative;
}
.calc__total:after{
position: absolute;
width: 35px;
height: 1px;
background: #333;
content: '';
left:0;
bottom: 0;
}
<div class="calc__total">
<input type="text" class="calc__total-cost" id="calc__total-cost-value" value="5000">
</div>
You could play with height, borders and outline: you could partially overlap the underline created with text-decoration using a white bottom border. Then you could restore the border using the outline property, e.g.
input {
width: 300px;
height: 4.1rem;
text-align: right;
padding: 0 10px;
text-decoration: underline;
font: 5rem Arial;
color: gold;
border: 0;
border-top: 10px #fff solid;
border-bottom: 10px #fff solid;
outline: 1px #d8d8d8 solid;
}
<input type="text" value="5000"/>
As the final result only the number is underlined with a light line (play with bottom border to adjust the tickness)
I ran into an issue when making identically sized <textarea> and <p> side by side.
All is well when textarea is in focus, but as soon as unfocus, the textarea gets about 3px larger for no reason.
Anyone know how to prevent this from happening?
code:
<textarea id="keyInput" rows="1" inputType="text" onInput="keyFun()" autofocus></textarea>
and
#keyInput {
text-transform: uppercase;
float: left;
margin-right: 10px;
word-wrap: break-word;
box-sizing: border-box;
line-height: 1.5;
outline: none;
resize: none;
width: 350px;
font-size: 16px;
text-align: center;
outline: 7px solid white;
}
Any and all help to make the textarea size stable on focus and unfocus is greatly appreciated.
CodePen
if you remove
outline: 7px solid white;
It won't grow-and-shrink.
You can also set the background color to the same as html and so the effect is not obvious like so: outline: 7px solid #DFCFBE
I was trying to create a circle with i icon in it for with CSS. However, when page is first rendered the circle looks like an inverted egg and covers the border around it slightly. (Zoom in the browser to see issue in more details)
The tricky part is, if you open Dev Tools and change any value related to it's position(width, height, whatever), everything will snap back to normal and it will become a circle.
https://jsfiddle.net/2yjashje/
<div class="round-egg">
i
</div>
.round-egg {
font-size: 14px;
background: white;
color: #8DC641;
border-radius: 10px;
cursor: help;
border-bottom: none !important;
border: 4px solid #8DC641;
width: 20px;
height: 20px;
text-align: center;
}
What is going on here?
I put the letter "i" in its own span and increased the margin from top to vertically centre it. As for the circle, I modified the border-radius property, and then removed the border-bottom: none; property as well. Assuming you want a circle, you need the bottom border.
https://jsfiddle.net/2yjashje/3/
<div class="round-egg">
<span class="icon">i</span>
</div>
.round-egg {
font-size: 14px;
background: white;
color: #8DC641;
border-radius: 30px;
cursor: help;
border: 4px solid #8DC641;
width: 20px;
height: 20px;
text-align: center;
display: table-cell;
}
.icon {
display: block;
margin-top: 2px;
}
I am using dreamweaver to create a website and I thought of just using Photoshop to create backgrounds. I decided to do so only because in case I'd choose to change the button name easily by just editing the codes, I could just refer to the code. If I would construct buttons using Photoshop, I wouldn't be able to edit the Texts in those buttons or in any element easily.
So my question is simple, How do I create a button that has a simple inline style making it transparent leaving the value of the button still visible.
.button {
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
}
It still leaves a border shade after your click it.
To get rid of the outline when clicking, add outline:none
JSFiddle example
button {
background-color: transparent;
background-repeat: no-repeat;
border: none;
cursor: pointer;
overflow: hidden;
outline: none;
}
button {
background-color: transparent;
background-repeat: no-repeat;
border: none;
cursor: pointer;
overflow: hidden;
outline: none;
}
<button>button</button>
The solution is pretty easy actually:
<button style="border:1px solid black; background-color: transparent;">Test</button>
This is doing an inline style. You're defining the border to be 1px, solid line, and black in color. The background color is then set to transparent.
UPDATE
Seems like your ACTUAL question is how do you prevent the border after clicking on it. That can be resolved with a CSS pseudo selector: :active.
button {
border: none;
background-color: transparent;
outline: none;
}
button:focus {
border: none;
}
JSFiddle Demo
Make a div and use your image ( png with transparent background ) as the background of the div, then you can apply any text within that div to hover over the button. Something like this:
<div class="button" onclick="yourbuttonclickfunction();" >
Your Button Label Here
</div>
CSS:
.button {
height:20px;
width:40px;
background: url("yourimage.png");
}
<div class="button_style">
This is your button value
</div>
.button_style{
background-color: Transparent;
border: none; /* Your can add different style/properties of button Here*/
cursor:pointer;
}
Setting its background image to none also works:
button {
background-image: none;
}
**add the icon top button like this **
#copy_btn{
align-items: center;
position: absolute;
width: 30px;
height: 30px;
background-color: Transparent;
background-repeat:no-repeat;
border: none;
cursor:pointer;
overflow: hidden;
outline:none;
}
.icon_copy{
position: absolute;
padding: 0px;
top:0;
left: 0;
width: 25px;
height: 35px;
}
<button id="copy_btn">
<img class="icon_copy" src="./assest/copy.svg" alt="Copy Text">
</button>
I have a couple of links encased in a border with a background... for some reason, the link is NOT clickable on the text, i.e., the cursor does not change to a hand on the link. It is only clickable on the BOTTOM border.... not sure why.
When I change around some of the CSS like the padding/margins/float, sometimes the links aren't even clickable at all. What could possibly be causing this??
THE CODE
<div id="teams">
<ul>
<li>Yankees</li>
<li>Phillies</li></ul>
</div>
CSS
#teams {
position: relative;
top: -10px;
left: -25px;
}
#teams a{
color: #000;
padding: 10px 0px 10px 0px;
}
#teams li {
background: #EEE;
padding: 7px 2px;
text-align: center;
width: 75px;
float: left;
margin: 15px;
font-size: 1.2em;
border: 2px solid #C8C8C8;
border-radius: 5px;
}
SOLVED
There was an invisible element blocking it. Credit to kei.
Right-click on the link and Inspect element. See if there are any transparent elements overlapping the link.