EN VI

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

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

Solution:

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>