Change the color of the border and placeholder /wpc7

  • Resolved sliderx3

    (@sliderx3)


    1 year, 10 months ago

    Hi!

    I’d like to change the color of the border and placeholder. Changes in the CSS and Elementor don’t work.

    Wheres my mistake?

    .wpcf7-list-item label {
	font-size: 1em !important;
}
input[type=checkbox]:checked:before {
	font-size: .75em;
	margin-left: -1px;
}

a:hover,a:active,a:link {
    outline: 0 !important;
    text-decoration: none !important;
}

.elementor-978 .elementor-element.elementor-element-3b4036e .eael-contact-form-7 .wpcf7-form label, .elementor-978 .elementor-element.elementor-element-3b4036e .eael-contact-form-7 .wpcf7-form .wpcf7-quiz-label {
font-family: "Amarante", Sans-serif;
font-size: 18px; 
}

.wpcf7-list-item-label {
	font-size:15px;!important;
}

.wpcf7  {
font-family:amarante;!important;
}

.wpcf7 input[type="submit"]
{
     color: #272727;
     margin: 0px 0px 0px 0px;!important;
	     padding: 5px 10px 5px 10px;
}

.wpcf7 input:active[type="submit"]
{
     background: #272727;!important;
}

.wpcf7 input[type="text"], .wpcf7 input[type="textarea"], .wpcf7 textarea, .wpcf7 input[type="email"]
{
    color: #000000;
}

.wpcf7-form select {
background-color: #414141 ;
    color:#000;!important;
}

::-webkit-input-placeholder {
    color: #000 !important;
    opacity: 1;
}

:-moz-placeholder { 
    color: #000 !important;
    opacity: 1;
}

::-moz-placeholder { 
    color: #000 !important;
    opacity: 1;
}

:-ms-input-placeholder { 
    color: #000 !important;
    opacity: 1;
	
	/* amaranth-regular - latin */
@font-face {
  font-family: 'Amaranth';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/amaranth-v18-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('../fonts/amaranth-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/amaranth-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/amaranth-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/amaranth-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/amaranth-v18-latin-regular.svg#Amaranth') format('svg'); /* Legacy iOS */
}

}


.eael-event-calendar-wrapper .fc-toolbar.fc-header-toolbar .fc-right .fc-button-group .fc-timeGridDay-button,
.eael-event-calendar-wrapper .fc-toolbar.fc-header-toolbar .fc-right .fc-button-group .fc-timeGridWeek-button,
.eael-event-calendar-wrapper .fc-toolbar.fc-header-toolbar .fc-right .fc-button-group .fc-dayGridMonth-button {
  display: none !important;
}

    The page I need help with: [log in to see the link]

Viewing 5 replies - 1 through 5 (of 5 total)

  • Hi, I can’t see border or border-color referenced in your CSS so that would seem to be the reason why your border colour is not changing.

    There is a border-color referenced on line 20 in the custom-style.css file that is being included in your site and that is what is setting your border colour. Are you able to change settings in that file? If so then change it there, if not then you’d have to target the border colour in another bit of CSS.

    Note that the selectors for form fields are quite specific for different types of fields in that CSS file:

    form input[type="text"], form input[type="password"], form input[type="email"], form input[type="url"], form input[type="date"], form input[type="month"], form input[type="time"], form input[type="datetime"], form input[type="datetime-local"], form input[type="week"], form input[type="number"], form input[type="search"], form input[type="tel"], form input[type="color"], form select, form textarea, .select2-container .select2-choice, .woocommerce .woocommerce-checkout .select2-container--default .select2-selection--single {
    border-color: #417844;
    }

    So you would need to target them specifically too in order to override them. But if you are able to edit the custom-style.css file directly and change the value that would be the easiest.

    For the placeholder attributes it will probably require a similar level of specificity to apply them to the fields. However, I also note that the placeholder attributes in your CSS are only targeting the prefixed versions such as -webkit-placeholder, whilst these may work in various browsers you should also include the unprefixed version:

    input::placeholder

    (See MDN for more info: https://developer.mozilla.org/en-US/docs/Web/CSS/::placeholder)

    Hope that helps!

    Thread Starter sliderx3

    (@sliderx3)

    Hi!

    I’ve edited every entry in the CSS in the customizer with this code.

    		border-color: #00FF00E; !important;

    That didn’t change a thing. And I also wonder, why I can’t change the color in elementor, cause the color was nowhere fixed.

    Edit: I just deleted some Stuff from the CSS but the changes aren’t implemented. Maybe theres the problem. I gonna change it directly in the file, maybe that works.

    • This reply was modified 1 year, 10 months ago by sliderx3.
    Thread Starter sliderx3

    (@sliderx3)

    I’ve changed the color in the customizer (not in the CSS). That worked maybe because I’ve deleted the entries in the css.

    But theres no Option for the placeholders. Im still searching.

    Thread Starter sliderx3

    (@sliderx3)

    Guess I’ve got it. I’ve installed a plugin for some custom css. It looks like, this one overrides the customizer….

    Forgot about that, im sorry.

    @sliderx3 No worries, glad you figured it out in the end!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Change the color of the border and placeholder /wpc7’ is closed to new replies.