I want to add a margin between the scroll bar and the right border of the text area.
I tried adding margin-right / left values to the -webkit-scrollbar but nothing works for me.
This is my style component :
const FormTextArea = styled.textarea`
display: flex;
flex-direction: row;
align-items: center;
padding: 12px;
width: 316px;
height: 216px;
background: #FFFFFF;
border: 1px solid ${props => props.error ? '#B42F08' : '#809BAF'};
border-radius: 4px;
margin-top: 16px;
margin-left: 20px;
&:focus {
border: 1px solid #3BB0C9 ;
}
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-thumb {
background-color: #B3B4B6;
border-radius: 10px;
}
resize:none;
&::placeholder {
color:#808285
}
&:focus , &:active {
outline: none !important;
}
`;
This is what my text area looks like :
I want the scroll bar to be as he is right now but with a 4px margin from the border
Any idea?
Thanks in advance
const FormTextArea = styled.textarea`
display: flex;
flex-direction: row;
align-items: center;
padding: 12px;
width: 316px;
height: 216px;
background: #FFFFFF;
border: 1px solid ${props => props.error ? '#B42F08' : '#809BAF'};
border-radius: 4px;
margin-top: 16px;
margin-left: 20px;
&:focus {
border: 1px solid #3BB0C9 ;
}
::-webkit-scrollbar {
width: 18px;
}
::-webkit-scrollbar-thumb {
background-color: #B3B4B6;
border-right: 10px white solid;
}
resize:none;
&::placeholder {
color:#808285
}
&:focus , &:active {
outline: none !important;
}
`;
You could just add a border-right to the ::-webkit-scrollbar-thumb and make the ::-webkit-scrollbar wider.
Related
I want to create a border (camera type) with 3 colors (blue, white and red).
I created this HTML code:
<div class="reinsurance-offer">
<div class="reinsurance-offer-link">Faites la promotion de vos événements</div>
</div>
I applied this CSS:
#block-subtheme-olivero-views-block-reassurance-block-1 .reinsurance-offer {
background-color: #f7f9fa;
padding-right: 2.25rem;
padding-left: 2.25rem;
padding-top: 1.6875rem;
padding-bottom: 1.6875rem;
text-align: center;
}
#block-subtheme-olivero-views-block-reassurance-block-1 .reinsurance-offer-link {
display: inline-flex;
padding: 0.75rem;
border: 5px solid;
border-color: #E20E17 #1F71B8;
background-color: #ffffff;
}
Here is the rendering :
I want to make the same display as in the image below, without the blur effect.
How can I do this in CSS and is it possible?
I didn't manage to get the desired result
You don't really need a lot of code. One gradient can do the job:
.box {
width: 250px;
height: 150px;
border: 10px solid;
border-image: linear-gradient(90deg,red 33%,#0000 0 66%,blue 0) 1;
}
<div class="box"></div>
i'm not really sure where you want to use this, but what about something like this:
.link {
--link-border-width: 5px;
color: grey;
position: relative;
width: fit-content;
display: block;
padding: .5rem 1rem 0;
text-decoration: none;
}
.link::before,
.link::after {
content: "";
height: 100%;
width: calc(100% / 3);
border: 4px solid red;
display: block;
position: absolute;
top: 0;
}
.link::before {
border: var(--link-border-width) solid blue;
border-right: none;
left: 0;
}
.link::after {
border: var(--link-border-width) solid red;
border-left: none;
right: 0;
}
<a href="#" class="link">This is my link<a>
.sear {
height: 50px;
width: 400px;
border: 0.5px solid black;
border-radius: 15px 0px 0px 15px;
}
.sear:focus {
//how to make only the border radius and other part of box selected?
}
.bar {
display: inline;
height: 50px;
width: 60px;
border: 0.5px solid black;
background-color: #ECECEC;
border-radius: 0px 15px 15px 0px;
}
.bar:hover {
cursor: pointer;
}
<input type="text" style="display: inline; margin-left: 20%;" class="sear" placeholder="Search...">
<button class="bar">🔎</button>
I was just wondering if it is possible to select only the border-radius and the rest of the box when the mouse is focused on the input as opposed to the corner of the box.
If you want to remove the default outline (which is not recommended for accessibility reasons) and add your own you can do this by changing the border color on focus but I would recommend wrapping the elements with a div and using javascript to add and remove a class to make this styling change like this:
var btnGroup = document.querySelector('.btn-group');
var input = document.querySelector('.sear');
input.onfocus = function() {
btnGroup.classList.add('focus');
}
input.onblur = function() {
btnGroup.classList.remove('focus');
}
.btn-group {
display: flex;
align-items: center;
position: relative;
width: 100%;
border: 1px solid black;
border-radius: 15px;
background-color: white;
width: 400px;
}
.btn-group.focus {
border-color: rebeccapurple;
}
.sear {
flex: 1;
border: none;
padding: .5rem;
margin: 0 0 0 0.5rem;
line-height: 1rem;
font-size: 1rem;
outline: none;
}
.bar {
padding: .5rem 1.5rem;
width: 60px;
background-color: #ECECEC;
border-radius: 0px 15px 15px 0px;
outline: none;
border-left: 1px solid #999;
}
.bar:hover {
cursor: pointer;
}
<div class="btn-group">
<input type="text" class="sear" placeholder="Search...">
<button class="bar">🔎</button>
</div>
for example:
.sear:focus {
/* to change the border when selected. */
border: 2px solid #0000ff;
}
If you are looking to have outline radius, its not posisble as mentioned in the comments, as a work around you can have something like this:
.sear {
height: 50px;
width: 400px;
border: 0.5px solid black;
border-radius: 15px 0px 0px 15px;
}
.sear:focus {
outline: none;
border-color: #9ecaed;
box-shadow: 0 0 2px #9ecaed;
}
.bar {
display: inline;
height: 50px;
width: 60px;
border: 0.5px solid black;
background-color: #ECECEC;
border-radius: 0px 15px 15px 0px;
}
.bar:hover {
cursor: pointer;
}
<input type="text" style="display: inline; margin-left: 20%;" class="sear" placeholder="Search...">
<button class="bar">🔎</button>
Just trying to understand what you want.
May be something like this ?
.sear {
height: 50px;
width: 400px;
border: 1px solid black;
border-radius: 15px 0px 0px 15px;
margin-left: 20px;
}
.sear:focus {
border-top: solid 3px blue;
border-left: solid 3px blue;
border-bottom: solid 3px blue;
margin-top: -2px;
}
.sear:focus + .bar {
border-top: solid 3px blue;
border-right: solid 3px blue;
border-bottom: solid 3px blue;
}
.bar {
display: inline-block;
height: 54px;
width: 60px;
border: 1px solid black;
background-color: #ECECEC;
border-radius: 0px 15px 15px 0px;
}
.bar:hover {
cursor: pointer;
}
<input type="text" class="sear" placeholder="Search..."/>
<button class="bar">🔎</button>
I'm attempting to make a login page for a website, https://essaydapp.com to submit and try and get into the application. I'm trying to mimic their design (see link) but I'm having some issues:
Screenshots:
https://imgur.com/w2GAphF
https://imgur.com/rimWY0s
In the first screenshot you can see the little 1px dashed border, I would like that to be the height of the entire page rather than the form only.
In the second screenshot you can see on the edges of the page and top there is the white color, but I would like that to be blue too. Thanks for any help in advance.
form {
/*border: 10px solid #1acebc;*/
padding: 28px;
border-left: 1px solid black;
border-left-style: dashed;
border-right: 1px solid black;
border-right-style: dashed;
}
button:hover {
opacity: 0.8;
}
button {
background-color: #09c;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
input[type=text],
input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #1acebc;
box-sizing: border-box;
}
img {
display: block;
margin: 0 auto;
padding-bottom: 60px;
padding-top: 30px;
width: 300px;
height: 300px;
}
body {
background-color: #e7f3f6;
/*border-left: 250px solid #007da5;
border-right: 250px solid #007da5;*/
border-left: 175px solid #007da5;
border-right: 175px solid #007da5;
padding-top: 175px;
padding-bottom: 215px;
}
<form>
<img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-973460_960_720.png" alt="profilepicture">
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="button" name="Login">Login</button>
</form>
This code removes any padding from left and right.
I hope that's what you want.
body{
border: 1px dashed;
backgroud-color: #e7f3f6;
margin-left: 0px;
margin-right: 0px;
}
Your existing code is somewhat messy. Instead, I suggest to use the following flex-box solution
body {
padding: 0;
margin: 0 auto;
background-color: #007da5;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
form {
display: flex;
width: 75%; /*Set the width required*/
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #e7f3f6;
border-left: 1px dashed black;
border-right: 1px dashed black;
}
img {
width: 300px;
height: 300px;
padding-bottom: 60px;
padding-top: 30px;
}
button:hover {
opacity: 0.8;
}
button {
background-color: #09c;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 85%;
}
input[type=text],
input[type=password] {
width: 85%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #1acebc;
box-sizing: border-box;
}
<form>
<img src="https://i.imgur.com/ihZBCxx.png" alt="profilepicture">
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="button" name="Login">Login</button>
</form>
You can find a screenshot of my problem here; While trying to style the range input I noticed that it has white corners. I can't seem to figure out why or how to remove them, I first thought it was an outline but setting outline to none did nothing. Here is a JSFiddle: http://jsfiddle.net/c1y0y7dj/
My CSS
input[type=range] {
-webkit-appearance: none;
width: 200px;
}
input[type=range]::-webkit-slider-runnable-track {
width: 200px;
height: 5px;
background: #565656;
border: none;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #F06A00;
margin-top: -5px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]::-moz-range-track {
width: 200px;
height: 5px;
background: #ddd;
border: none;
border-radius: 3px;
}
input[type=range]::-moz-range-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #F06A00;
}
input[type=range]::-ms-track {
width: 200px;
height: 5px;
background: transparent;
border-color: transparent;
border-width: 6px 0;
color: transparent;
}
input[type=range]::-ms-fill-lower {
background: #373737;
border-radius: 10px;
}
input[type=range]::-ms-fill-upper {
background: #575757;
border-radius: 10px;
}
input[type=range]::-ms-thumb {
border: none;
height: 16px;
width: 16px;
border-radius: 50%;
background: #F06A00;
}
input[type=range]:focus::-ms-fill-lower {
background: #373737;
}
input[type=range]:focus::-ms-fill-upper {
background: #575757;
}
Try this css
input[type=range] {
-webkit-appearance: none;
width: 200px;
background-color: transparent;
}
Here is the solution
You should add to
input[type=range] {
-webkit-appearance: none;
width: 200px;
background: transparent;
}
The input tag by default has a white background set by chrome if you just added
background-color :#565656 ;
to your first input selector it should solve your issue
Have used the below code for text editor with bullet listing in it.
<div text-angular="text-angular" ng-model="comments"
style="border: 1px solid #e1e1e1;"
ta-toolbar="[['ul']]" name="htmlcontent1" class="form-control myform1-height"
ta-html-editor-class="form-control myform1-height">
</div>
the issue is the text editor doesn't popup keyboard when touched.
have used below css for it.
.closing-textarea {
width: 100%;
margin-top: 30px;
border: 1px solid #dee5e7;
outline: none;
-webkit-appearance: none;
resize: none;
padding: 10px;
}
.closing-comments-wrapper .form-control {
border: none;
border-top: 1px solid #e1e1e1;
/*padding: 10px;*/
/*border: 2px dashed #DDD;*/
}
.closing-comments-wrapper .ta-editor.form-control.myform1-height, .ta-scroll-window.form-control.myform1-height {
min-height: 150px;
height: auto;
overflow: auto;
font-family: inherit;
font-size: 100%;
}
.closing-comments-wrapper .form-control.myform1-height > .ta-bind {
height: auto;
min-height: 150px;
padding: 6px 12px;
}
.closing-comments-wrapper .btn-group>.btn:first-child {
background: rgb(255, 255, 255);
float: right;
}
.closing-comments-wrapper .btn-group {
float: right;
}
.ta-hidden-input {
display: none;
}