css Question posted in
Some basic documentation can be found here.

Css – How do I style the place holder and background of an input form using vue js and element-plus

I’m trying to change the font-style, font-size, font-weight and some others for the the placeholder and the internal part of an input form in vue3 and element plus.

i’ve tried styling it separately in the style section but it doesn’t sem to work unless i use inline styling.

so far ive been only able to style the outer part but i can’t seem to figure out hoe to do that of the inner part of the input form.

I’ve tried using inspect on the browser but still no improvement.

i know most of element-plus have their styling already but i can’t seem to figure out how to customize them the way i want.

I’m still new to using vue3 and element-plus

<el-input v-model="input"  
           style="width: 614px;
            height: 82px;
            border: 1px solid rgba(168, 192, 39, 1);
            border-radius: 10px;
            margin-left: 653px;
            margin-top: 28px;
             " placeholder="Enter your email address" />

this is the code i wrote in the tag

.el-input__inner{
    width: 375px;
    height: 39px;
    font-size: 32px;
    font-weight: 400px;
    line-height: 38.73px;
    margin: 21px 200px 22px 39px;
}

.el-input__wrapper{
    align-items: center;
    padding: none !important;
    border-radius: 10px;

}

I used the class names which were given when i inspected the code on the web browser

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    After going through the answer @yoduh provided i was finally able to get the desired look.

    so for the background color to be set

    .el-input :deep(.el-input__wrapper){
padding: none !important;
background-color: rgba(246, 249, 233, 1);

    }

    and to change the styling of the placeholder

    .el-input :deep(.el-input__inner){
height: 39px;
width: 375px;

padding: none !important;
font-size: 32px;
font-weight: 400px;
line-height: 38.73px;
opacity: 80%;
color: rgba(148, 148, 148, 0.55);
margin: 21px  22px 39px;
text-align: center;

    }


  2. 0

    Scoped styles can at most only affect the root element of child components. For a scoped style to affect the inner elements of a child component, you must use the :deep() selector.

    <style scoped>
.el-input :deep(.el-input__inner){
    width: 375px;
    height: 39px;
    font-size: 32px;
    font-weight: 400px;
    line-height: 38.73px;
    margin: 21px 200px 22px 39px;
}

.el-input :deep(.el-input__wrapper){
    align-items: center;
    padding: none !important;
    border-radius: 10px;

}
</style>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search