You can see that the buttons have one darkish line at the bottom and to the right. How can I achieve this effect? Right now all I have is
#button {
background-color:blue;
}
Here's what you can do:
#button {
border: none; // clear default button border
border-bottom: 2px solid gray; // set bottom border
border-right: 2px solid gray; // set right border
}
Related
I'd like the border of the text box to be 1px when someone hovers and then change to 3px when clicked into.
By default the normal state (unfilled/not hover)of the text box border is 1px:
But the hover is 3px (when it should only be 3px after being clicked into):
Here is how it should be shown:
whenever I set the boarder size to 1px, the boarder doesn't switch to 3px when clicked into.
.form-pristine {
.mat-form-field-appearance-outline:not(.mat-form-field-disabled) .mat-form-field-flex:hover .mat-form-field-outline-thick {
color: mat.get-color-from-palette($alt1, 800);
border-width: 1px;
}
}
How to I set the hover state border to 1px while keeping the activated(clicked into) state at 3px?
May be this will help:
::ng-deep .mat-form-field .mat-form-field-flex:hover {
border: 1px solid red;
}
::ng-deep .mat-form-field .mat-form-field-underline {
background-color: red;
}
::ng-deep .mat-form-field.mat-focused .mat-form-field-flex {
border: 3px solid green;
}
::ng-deep .mat-form-field.mat-focused .mat-form-field-ripple{
background-color: green !important;
}
I have vuetify 1.5.x on my codepen. As you can see in my codepen, the line on autocomplete is quite thick. I only want that line to be only 1px. I want that select field (outline border) to be border: 1px solid red. I am try inspect element and see that class, then I write code like this:
.theme--light.v-select-list v-card {
border: 1px solid red;
}
this code doesn't work. I try another way using this code:
theme--light.v-select-field--outline > .v-input__control > .v-input__slot {
border: 1px solid red;
}
this code doesn't work too. What should I do?
Override in your global or component style
.v-text-field--outline.v-input--has-state>.v-input__control>.v-input__slot,
.v-text-field--outline.v-input--is-focused>.v-input__control>.v-input__slot,
.theme--light.v-text-field--outline:not(.v-input--is-focused):not(.v-input--has-state)>.v-input__control>.v-input__slot:hover {
border: 1px solid !important;
}
.theme--light.v-text-field--outline>.v-input__control>.v-input__slot {
border: 1px solid !important;
}
I have 4 float: left div containers like so...
I want to display a border when a div is hovered over. However, when I hover over the first or second div, it pushes the bottom div to the left...
I tried adding margin and padding to the div's, but nothing seemed to work.
.div
{
width: 33%;
}
.div:hover
{
boder: solid 1px #EEE;
}
Use a backround coloured or transparent border on the initial state and the size of the box won't change.
.div {
width: 32%; // (33% + 1px border) * 3 = likely more than the width of the container
border: solid 1px transparent;
}
.div:hover {
boder: solid 1px #EEE;
}
One solution is to have a border all of the time, but make it the same color as the background when not hovered.
For example:
.div
{
width: 33%;
border: solid 1px #FFF;
}
.div:hover
{
border: solid 1px #EEE;
}
EDIT: Alternatively if an invisible border won't work (gradient background, etc.) you can add 1px padding when not hovered and make it 0px padding when hovered.
For example:
.div
{
width: 33%;
padding: 1px;
}
.div:hover
{
border: solid 1px #EEE;
padding: 0;
}
I'm having a problem with an box and its associated css outline style. When the box is focused, it should have a blue outline (working). On form validation, if there is a problem, the .error class is added changing the outline and background color red (not working)
On focus I have a style:
input, select {
font-size: 10pt;
border: solid 1px #9598a0;
padding: 2px;
}
input:focus{
background: #EFF5FF;
color: black;
outline: solid 2px #73A6FF;
}
For the error:
input.error:focus, .error {
outline: 2px solid red;
background: rgb(255,240,240);
}
The problem is that the outline without focus is on the outside of the input box while the outline on focus is on the inside of the box so the element jumps as you click on it (CHROME).
Please see this image:
First is on focus, second is no focus with error, third is error with focus. Notice how the no focus causes the border to expand outside the object.
Is there a good way to fix this?
Try setting outline-offset explicitly. Any valid (see Syntax section) value should do, but for moving outline inside the element a negative one can be applied, for example:
JSFiddle
input {
background: #EFF5FF;
outline: solid 2px #73A6FF;
outline-offset: -2px;
}
input.error {
outline: 2px solid red;
background: rgb(255,240,240);
}
Although you are asking about Chrome, be aware that outline-offset property is not supported in IE.
Change every outline to border and give the basic input selector a transparent border (could be grey too for example) for it not to push the second input around et Voilá :) (Updated JSFiddle)
input{
font-size: 10pt;
border: solid 1px #9598a0;
padding: 2px;
border: solid 2px transparent;
}
input:focus{
background: #EFF5FF;
color: black;
border: solid 2px #73A6FF;
}
input.error:focus{
border: 2px solid red;
background: rgb(255,240,240);
}
.error {
border: 2px solid red;
background: rgb(255,240,240);
}
How do I cut the shared border line between these two divs? I want the top small div to have border on three sides expect bottom and the larder div below that to have only top border but leaving the shared border. So it will look like a line running across both divs upper borders.
I tried overlaying top div on the bottom. But Not getting what I want.
.ihead {
background-color: #EEE;
width: 15em;
height: 3em;
text-align:center center;
border-top:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
border-bottom:none;
}
.ibody {
background-color: #EEE;
width: 60em;
height:20em;
margin-top:3em;
border-top:1px solid black;
z-index: 10;
}
<div class="ihead"><h>Hello !</h></div>
<div class="ibody">......</div>
From -
To -
The normal way you'd achieve this effect is to have the box on top move down over the top of it's border. In your example, you can achieve this by adding position: relative; bottom: -1px to your .ihead class and removing the margin-top: 3em from your .ibody class.
See the jsFiddle.
.bordered{
border: 1px solid black;
}
.bordered:not(:first-child){ //to merge borders between rows
border-top: none;
}
.bordered:not(:first-child){ //if you want to merge between columns
border-left: none;
}
<div class="bordered"><h1>Test1</h1></div>
<div class="bordered"><h1>Test2</h1></div>
<div class="bordered"><h1>Test3</h1></div>
This question was the first that popped up for me so i felt it was best if i answered it properly unlike the accepted answer above.
Using css:
.bordered{
border: 1px solid black;
}
.bordered:not(:first-child){ //to merge borders between rows
border-top: none;
}
.bordered:not(:first-child){ //if you want to merge between columns
border-left: none;
}